http interceptor using angular-busy to show loading indicator

busy.interceptor.js

(function () {
    'use strict';

    angular
        .module('app')
        .config(['$httpProvider', function ($httpProvider) {
            $httpProvider.interceptors.push('busyInterceptor');
        }])
        .factory('busyInterceptor', busyInterceptor);

    busyInterceptor.$inject = ['$rootScope', '$q'];

    function busyInterceptor($rootScope, $q) {
        return {
            request: onRequest,
            response: onResponse,
            responseError: onResponseError
        };

        function onResponseError(response) {
            if (response.config && response.config.defer) {
                response.config.defer.reject();
            }
            return $q.reject(response);
        }

        function onResponse(response) {
            if (response.config && response.config.defer) {
                response.config.defer.resolve();
            }
            return $q.when(response);
        }

        function onRequest(config) {
            // filter for specific URLs only
            if (config.url.indexOf('/api/') !== -1) {
                registerPromise(config);
            }
            return $q.when(config);
        }

        function registerPromise(config) {
            var defer = $q.defer();
            $rootScope.activePromises.push(defer.promise);
            config.defer = defer;
            // once the promise is fulfilled we remove it from the activePromises array
            defer.promise.finally(function () {
                angular.forEach($rootScope.activePromises, function (promise, index) {
                    if (promise === defer.promise) {
                        $rootScope.activePromises.splice(index, 1);
                    }
                });
            });
        }
    }
})();