Angularjs 1.3 $http interceptors

Question

I've currently got the following in my app to show a loading animation whenever there are $http requests running, then hidden at the end;

app.config(['$httpProvider', function ($httpProvider) {
    var $http,
        interceptor = ['$q', '$injector', function ($q, $injector) {
            var error;

            function response(response) {
                // get $http via $injector because of circular dependency problem
                $http = $http || $injector.get('$http');
                if ($http.pendingRequests.length < 1) {
                    $('#loadingWidget').hide();
                }
                return response;
            }

            function responseError(response) {
                if (response.status == 401) {
                    alert("You have been logged out or have tried to access a restricted area, redirecting to the login screen...");
                    window.location = globals.siteUrl + 'login';
                } else {
                    // get $http via $injector because of circular dependency problem
                    $http = $http || $injector.get('$http');
                    if ($http.pendingRequests.length < 1) {
                        $('#loadingWidget').hide();
                    }
                }
                return $q.reject(response);
            }

            return function (promise) {
                $('#loadingWidget').show();
                return promise.then(response, responseError);
            }
        }];

        $httpProvider.responseInterceptors.push(interceptor);

}]);

I've been trying to convert this to work with 1.3 but I just can't seem to nail it. I've been referencing these docs $http (interceptor section) but I'm not sure how to re-write it. Can anyone help?

UPDATE: Here's what I've tried already:

app.factory('xmHttpInterceptor', function ($q, $http, $injector) {
    return {
        // optional method
        'response': function (response) {
            // get $http via $injector because of circular dependency problem
            $http = $http || $injector.get('$http');
            if ($http.pendingRequests.length < 1) {
                $('#loadingWidget').hide();
            }
            return response;
        },

        // optional method
        'responseError': function (rejection) {
            alert(rejection);
            // do something on error
            if (canRecover(rejection)) {
                return responseOrNewPromise
            }
            return $q.reject(rejection);
        }
    };
});

and:

app.config(['$httpProvider', 'xmHttpInterceptor', function ($httpProvider, xmHttpInterceptor) {
    $httpProvider.interceptors.push('xmHttpInterceptor');
}]);

But the site fails to load with:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.17/$injector/modulerr?p0=app&p1=Erro…s.org%2F1.3.0-beta.17%2F%24injector%2Funpr%3Fp0%3DxmHttpInterceptor%0A%20%...<omitted>...4) 

Answer 1

For example for using from "Angular Loading Bar" Try this:

angular.module( 'myApp', [
    .
    .
    'angular-loading-bar',
    .
    .
] )

And:

.config( [ '$httpProvider',
    function ( $httpProvider ) { 

        $httpProvider.interceptors.push( function ( $q, $injector, cfpLoadingBar ) { 
            var $http;

            return {

                request: function ( config ) { 
                    cfpLoadingBar.start();
                    return config;
                },

                response: function ( response ) { 
                    // get $http via $injector because of circular dependency problem
                    $http = $http || $injector.get( '$http' );
                    if ( $http.pendingRequests.length < 1 ) { 
                        cfpLoadingBar.complete();
                    }
                    return response;
                },

                responseError: function ( response ) { 
                    // get $http via $injector because of circular dependency problem
                    $http = $http || $injector.get( '$http' );
                    if ( $http.pendingRequests.length < 1 ) { 
                        cfpLoadingBar.complete();
                    }
                    return $q.reject( response );
                }
            }
        } );
    }
] );

Answer 2

Since the problem was already solved on the comments, I'm posting it as a community wiki:

The $httpProvider.responseInterceptors is no longer support in 1.3, you have to use $httpProvider.interceptors instead.

-- runTarm

And:

Try not injecting your xmHttpInterceptor:

app.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push('xmHttpInterceptor');
}]);

-- David Bennett