Progress bar/loader with AngularJS

Question

Here is my code to add a progress bar on every HTTP request. Can someone please point out to me whether I am doing it right or not?

Template for loader:

<div class="loader" ng-class="!loaderState ? 'hidden' : ''">
    <div class="parentLoader">
        <div class="loaderContainer">
            <div class="logo"></div>
            <div class="loadingMsg">Processing..., Please Wait...</div>
            <div class="loadingImg"></div>
        </div>
    </div>
</div>

Interceptor:

.factory('authInterceptor', ['$rootScope', function($rootScope){
            return {
                request : function request (config) {                   
                    $rootScope.loaderState = true;
                    return config;
                },
                response : function response(response) {
                    $rootScope.loaderState = false;
                    return response;
                }
            };
        }])

Answer 1

Yes, u can do like this. But some scenario doesn't work.

Scenario 1: If controller has 5 parallel services, at that time loader will get ended after any response received in out of 5.

Scenario 2: We don't need to show loader to some of the services, internally we will call based on the click or any action. At that time it will fail.

Instead of using interceptor better use that flag in respective controller itself or u have to pass additional flag in the header to hide and show loader via interceptor. My suggestion is handle that in respective controller itself.