ionicLoading to show quicker?

1

I am displaying a list on which user can filter, and I had put a ng-controller="loadingCtrl" in ion-item to lock screen while the app is fetching content. Works, however, it is only a couple of second (which is long!) after the users makes its selection that the Loading icon appears. How can i display instantly the loading icon once user touches a selection criteria ?

HTML :

	<article class="item_frame">
		<a class="" href="#"><img class="bookmark_icon" src="img\bookmark_plus_whitev3.png">
		</a>
		<img class="item_main_image" ng-src="img/{{dish.cuisineTypeIsoCode}}/{{dish.itemid}}small.jpg">
		<img class="item_icon_circled" src="img/dishiconv4orangecircled.png">
		<h1 class="item_name_english">{{dish.nameEnglish}}</h1>
		<h2 class="item_name_local_language">{{dish.nameLocal}}</h2>
		<h2 class="item_name_local_language">{{dish.dishCategory}}</h2>
		<p class="item_description ">{{dish.description}}</p>
		<div class="subcuisine_container_w_flag">
			<span class="subcuisine_text_in_dish_pages"> | {{dish.region}}</span>
			<img class="flag_in_dishpages" ng-src="img/{{dish.country}}.png">
		</div>	
	</article><!--main article frame 1 -->	

  </ion-item>
</ion-list>

and my controller for loading:

  .controller('loadingCtrl', function($scope, $timeout, $ionicLoading) {
   // Setup the loader
   $ionicLoading.show({
content: 'Loading',
animation: 'fade-in',
showBackdrop: false,
template: 'Fetching...',
maxWidth: 200,
showDelay: -2000
   });
  // 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);
 });