$ionicLoading doesn't show on device

Hello all,

$ionicLoading works fine on browser (ionic serve), but when I test it on my device (HTC One M8), it doesn’t show up, could anyone explain why?

Basically, I followed the tutorial here http://learn.ionicframework.com/formulas/loading-screen-with-interceptors/,

I’m trying to get a loading shows up for every http request. Here’s the code in my .run function

  $rootScope.$on('loading:show', function() {
       $ionicLoading.show({
          template: '<span style="color: #ffffff;">Loading...</span>'
       })
  });

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

And here’s the code in my .config function

$httpProvider.interceptors.push(function($rootScope) {
  return {
    request: function(config) {
      $rootScope.$broadcast('loading:show');
      return config;
    },
    response: function(response) {
      $rootScope.$broadcast('loading:hide');
      return response;
    }
  }
});

Don’t you see any error when remote debugging your app on device?

I’ve done something similar but I’ve wrapped $ionicLoading in a service rather than using $rootScope and broadcasting events.

Nope, don’t see any error.