Loading Icon anytime it is needed

1

My app is pretty content-heavy, consequently, there is always a lag between the time the user touch the screen and between content updates (5 sec +).

I have tried to implement a loading module, and call it throughout the app by setting a ng-controller in the body tag . However there is alwasy a delay, it does not appear immediate on touch, and it does not happen everywhere i would like to (browsing via several screen etc) . Anyone would have an idea of how to make it “standard” throughout the app so that it shows up anytime app is loading something ?
Thanks!

controller.js

.controller('loadingCtrl', function($scope, $timeout, $ionicLoading) {
  // Setup the loader
  $ionicLoading.show({
content: 'Loading',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 200,
showDelay: 0
  });
  // Set a timeout to clear loader, however you would actually call the $ionicLoading.hide(); method    whenever everything is ready or loaded.
 $timeout(function () {
$ionicLoading.hide();
  }, 2000);
})

HTML

 <body ng-app="wmapp" ng-controller="loadingCtrl">
<ion-nav-view ></ion-nav-view>
 </body>