$ionicLoading not working on $scope

Try to use $ionicLoading directive, but cannot make it works.

I am showing the loading screen when someone clicked on the link while the link process to API, the loading screen will shown before its completed and return some data. Someone please tell me where i am doing it wrong.

controller.js

angular.module('ionicApp.controllers', [])

.controller('DashCtrl', function($scope, $http, $ionicScrollDelegate, $ionicLoading) {
    $scope.show = function() {
      $ionicLoading.show({
        content: 'Loading',
        animation: 'fade-in',
        showBackdrop: true,
        maxWidth: 200,
        showDelay: 0
      });
    };

    $scope.hide = function(){
          $ionicLoading.hide();
    };

    //scope to show posts by specific user
    $scope.byUser = function(uid){
         $scope.show($ionicLoading);
         var xhr = $http({
            method: 'post',
            url: 'http://www.mywebsite.com/api/lists.php?uid='+uid
         });
         xhr.success(function(data){
             $scope.data = data.data;
         });
        $ionicScrollDelegate.scrollTop();
        $scope.hide($ionicLoading);
    }
});