title: How to know if all $http calls are over - AngularJS
body: <p>I need to trigger an event when all of my $http calls are processed. I also need to know if any call has failed. I tried using the available solutions on stackoverflow such as using an interceptor. </p>
  
  <pre><code>angular.module('app').factory('httpInterceptor', ['$q', '$rootScope',
    function ($q, $rootScope) {
      var loadingCount = 0;
  
      return {
        request: function (config) {
          if(++loadingCount === 1) {
            $rootScope.$broadcast('loading:progress');
          }
          return config || $q.when(config);
        },    
        response: function (response) {
          if(--loadingCount === 0) {
            $rootScope.$broadcast('loading:finish');
          }
          return response || $q.when(response);
        },    
        responseError: function (response) {
          if(--loadingCount === 0) {
            $rootScope.$broadcast('loading:finish');
          }
          return $q.reject(response);
        }
      };
    }
  ]).config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push('httpInterceptor');
  }]);
  </code></pre>
  
  <p>However, with this approach the <code>$rootScope.$broadcast('loading:finish')</code> gets called after every $http call is completed. I want to trigger an event when all the $http calls are over.</p>
  
  <p>I cannot use <code>$q</code> since the <code>$http</code> calls in my page belong to various directives and are not called in the same controller.</p>