Generic implementation for loader. It will target root scope while any promise is in process

index.html

<p>
  Implementation of loader in $rootScope
</p>
<div style="float:right;padding-top:1em;" data-ng-show="loading">
  <img src="~/images/ajax-loader-inline.gif" /> Loading, please wait ...
</div>

loader.js

angular.module('myModule', [])
    .config(function ($provide) {

	// display loading if something takes too long
        $provide.decorator('$q', ['$delegate', '$rootScope', function ($delegate, $rootScope) {
            var pendingPromisses = 0;
            $rootScope.$watch(
              function () { return pendingPromisses > 0; },
              function (loading) { $rootScope.loading = loading; }
            );
            var $q = $delegate;
            var origDefer = $q.defer;
            $q.defer = function () {
                var defer = origDefer();
                pendingPromisses++;
                defer.promise.finally(function () {
                    pendingPromisses--;
                });
                return defer;
            };
            return $q;
        }]);
    });