Ionic show loader in each ajax/http request

Add below lines of code in run section of your app.js

$rootScope.$on('loading:show', function() {
     $ionicLoading.show({template: '<ion-spinner icon="spiral"/>'})
 })

 $rootScope.$on('loading:hide', function() {
      $ionicLoading.hide()
 })


Add below interceptor in config section of your app.js

$httpProvider.interceptors.push(function($rootScope, $injector, $q) {
        return {
            request: function(config) {
              $rootScope.$broadcast('loading:show');
              return config
            },
            response: function(response) {
              var $http = $http || $injector.get('$http');
              if($http.pendingRequests.length < 1) {
                $rootScope.$broadcast('loading:hide');
              }
              return response;
            },
            requestError: function(rejectReason) {
              $rootScope.$broadcast('loading:hide');
              return $q.reject(rejectReason);
            },
            responseError: function(rejectReason) {
              $rootScope.$broadcast('loading:hide');
              return $q.reject(rejectReason);
            }
        }
    });

in app.js It may look like:

app.run(function($ionicPlatform, $rootScope, $ionicLoading) {
        $ionicPlatform.ready(function() {
            if(window.StatusBar) {
                // org.apache.cordova.statusbar required
                StatusBar.styleDefault();
                StatusBar.overlaysWebView(true);
            }
        });

        $rootScope.$on('loading:show', function() {
          $ionicLoading.show({template: '<ion-spinner icon="spiral"/>'})
        })

        $rootScope.$on('loading:hide', function() {
          $ionicLoading.hide()
        })
 })

.config(function($stateProvider, $urlRouterProvider, $httpProvider) {

$stateProvider

  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

  .state('app.softwareCostEstimation', {
    url: '/softwareCostEstimation',
    views: {
      'menuContent': {
        templateUrl: 'templates/softwareCostEstimation.html',
        controller: 'SoftwareCostEstimationCtrl'
      }
    }
  })

----
----

$urlRouterProvider.otherwise('/app/softwareCostEstimation');

  $httpProvider.interceptors.push(function($rootScope, $injector, $q) {
        return {
            request: function(config) {
              $rootScope.$broadcast('loading:show');
              return config
            },
            response: function(response) {
              var $http = $http || $injector.get('$http');
              if($http.pendingRequests.length < 1) {
                $rootScope.$broadcast('loading:hide');
              }
              return response;
            },
            requestError: function(rejectReason) {
              $rootScope.$broadcast('loading:hide');
              return $q.reject(rejectReason);
            },
            responseError: function(rejectReason) {
              $rootScope.$broadcast('loading:hide');
              return $q.reject(rejectReason);
            }
        }
    });

});