var app = angular.module('tutorialWebApp', ['ngRoute']);
app.directive('loading', function () {
    return {
        restrict: 'E',
        replace:true,
        template: '<p><img src="img/loading.gif"/></p>', // Define a template where the image will be initially loaded while waiting for the ajax request to complete
        link: function (scope, element, attr) {
            scope.$watch('loading', function (val) {
                val = val ? $(element).show() : $(element).hide();  // Show or Hide the loading image  
            });
        }
    }
});

app.controller('PageCtrl', function ( $scope, $http, $routeParams ) {
    $scope.loading = true; // Show loading image
    $http.get('http://example.com/posts').success(function(data){
        $scope.posts = data;
        $scope.loading = false; // hide loading image on ajax success
    });
});