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

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