loading notification

app.js

    app.config(function($routeProvider, $locationProvider, $httpProvider) {
        // ...
        $httpProvider.responseInterceptors.push(function ($q, $rootScope) {
            return function (promise) {
                $rootScope.$broadcast('startLoading');
                return promise.then(function (response) {
                    $rootScope.$broadcast('stopLoading');
                    return response;
                }, function (response) {
                    $rootScope.$broadcast('stopLoading');
                    return $q.reject(response);
                });
            };
        });
    });
    app.directive('appLoadingNotification', function () {
        return {
            template: '<div ng-show="isLoading()" class="alert alert-info">Loading ...</div>',
            replace: true,
            restrict: 'A',
            link: function (scope) {
                var loading = 0;
                scope.$on('startLoading', function () {
                    loading += 1;
                });
                scope.$on('stopLoading', function () {
                    loading -= 1;
                });
                scope.isLoading = function () {
                    return loading > 0;
                };
            }
        };
    });