Angularjs How To Detect All Content Loaded Finish In Controller While There Is Few Ajax Call Inside?

I have checked several answer, but none is actually same as my scenario. My purpose is to show a spinner dialog once the controller start, and inside the controller, there are few

Solution 1:

Why not just do something like this?

$scope.global.loading = true;
var status = 0;

$http.post('fetchData.do', '', config
        ).then(functionsuccessCallback(response) {     
            status++
            if (status === NumOfAjaxRequests) {
              $scope.global.loading = false:
            }
        }, functionerrorCallback(response) {
            //handle errors
        });

Increment some variable each time an ajax requests finishes. And then remove the loader once all have finished.

Another and probably better solution would be using Angular's built in promise library Q, and the q.all method which executes a callback after all promises have resolved. A good example can be found here: q.All Example resolving multiple promises

Solution 2:

Don't reinvent the wheel.

npm/bower install angular-loading-bar --save

All your http requests will be intercepted and a loading bar will appear until each one is resolved.

The library doesn't propose an overlay (to prevent interacting with the page) but you can do it this way:

#loading-bar {
  position: fixed;
  z-index: 99999;
  width: 100%;
  height: 100%;
  pointer-events: all;
  cursor: wait;
}