AngularJS $http loading screen compatibility

I've used the following angular module to create a loading screen until all $http requests finish. It works fine on angular 1.0.7, but doesn't work on angular 1.2.10 . I need to use angular-resource, and angular-route also, so I can't stay on angular 1.0.7. Can anyone help me rewrite this to work on the latest angular?

angular
.module('loadingOnAJAX', [])
.config(function($httpProvider) {
    var numLoadings = 0;
    var loadingScreen = $('<div style="position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;background-color:gray;background-color:rgba(70,70,70,0.2);"><img style="position:absolute;top:50%;left:50%;" alt="" src="loading.gif" /></div>')
        .appendTo($('body')).hide();

    $httpProvider.responseInterceptors.push(function() {
        return function(promise) {
            numLoadings++;
            loadingScreen.show();
            var hide = function(r) {
                if (!(--numLoadings)){
                    loadingScreen.hide();
                }
                return r;
            };
            return promise.then(hide, hide);
        };
    });
});

In angular 1.2.10, the loading screen doesn't appear, but If I place an alert() inside the hide function, the loading screen appears until I press OK on the alert. So I'm not sure if things are happening too fast, or what.

Corrected Version:

angular
.module('loadingOnAJAX', [])
.config(function($httpProvider) {
    var numLoadings = 0;
    var loadingScreen = $('<div style="position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;background-color:gray;background-color:rgba(70,70,70,0.2);"><img style="position:absolute;top:50%;left:50%;" alt="" src="loading.gif" /></div>')
        .appendTo($('body')).hide();

    $httpProvider.interceptors.push(function() {
        return {
            'request': function(config){
                numLoadings++;
                loadingScreen.show();
                return config;
            },
            'response': function(response){
                if (!(--numLoadings)){
                    loadingScreen.hide();
                }
                return response;
            }
        };
    });
});