Global Loading Screen with Interceptors || unable to show ionic loading

Hi,

It’s working using http request and response, but ionic loading is not showing while button click.
Please find these below code,
Help me to fix this.

var app = angular.module(‘ionicApp’, [‘ionic’])

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

app.run(function($rootScope, $ionicLoading) {
$rootScope.$on(‘loading:show’, function() {
$ionicLoading.show({template: ‘foo’})
})

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

app.controller(‘MainCtrl’, function($scope, $ionicLoading) {
$scope.click = function(){
$ionicLoading.show({template: ‘Loading…’});
}
})