Angular watching for changes in $http.pendingRequests from directive

I think you should be able to use the function() syntax in your watch.

scope.$watch(function() {
    return $http.pendingRequests.length;
}, function() {
    //logic executed to display or hide loading box
});

Syntax is explained in the docs for $watch

I am a little bit late but this is an improvement on pixelbits answer:

scope.isBusy = function () {
    return $http.pendingRequests.length > 0;
};
scope.$watch(scope.isBusy, function (hasPending) {
    if (hasPending) {
      elm.show();
    } else {
      elm.hide();
    }
});

You may want to put this in a directive like this:

.directive('loadingBoxDir', ['$http', function ($http) {
    return {
       restrict: 'A',
       link: fn_link
    };
    function fn_link(scope, elm) {
       scope.isBusy= function () {
           return $http.pendingRequests.length > 0;
       };
       scope.$watch(scope.isBusy, function (hasPending) {
           if (hasPending) {
              elm.show();
           } else {
              elm.hide();
           }
       });
    }
}]);

Variation of watching a function

scope.$watch(function() {
    return $http.pendingRequests.length > 0;
}, function(hasPending) {
    if (hasPending) {
        // show wait dialog
    }
    else  {
         // hide wait dialog
    }
});