Show Ionic loading till data loaded

Question

I'm working on an app using Ionic framework in which I want to show loading spinning wheel till data is completely loaded from an API

Controller.js

.controller('PrayersCtrl', function($scope,Prayers,$ionicLoading,$timeout) {
                $ionicLoading.show({
                content: 'Loading',
                animation: 'fade-in',
                showBackdrop: true,
                maxWidth: 200,
                showDelay: 0
              });

        $scope.prayers = Prayers.query();
        $ionicLoading.hide();

    })

and Services.js

angular.module('starter.services', [])

.factory('Prayers', function($resource) {
    return $resource(base_url+'/wp/v2/posts');
});

in this case, Spinning wheel doesn't even show, (I mean it is so fast that it display and disappear in ms). than it take time to load data, meanwhile it displays blank page until data is loaded. I want to show spinning wheel till data is loaded in the page.

Edited

I also tried timeout in controller.js

.controller('PrayersCtrl', function($scope, $stateParams,Prayers,$ionicLoading,$timeout) {
      $ionicLoading.show({
        content: 'Loading',
        animation: 'fade-in',
        showBackdrop: true,
        maxWidth: 200,
        showDelay: 0
      });
      $timeout(function () {
        $ionicLoading.hide();
        $scope.prayers = Prayers.query();
      }, 2000);
    })

But in this case, spinning wheel disappears after 2000 ms as shown in code; I want to spinning code till data completed loaded.

Answer 1

in controller.js, I added a $promise after query and some changes to display message in case of Network error

.controller('PrayersCtrl', function($scope,Prayers,$ionicLoading,$timeout) {
                $ionicLoading.show({
                content: 'Loading',
                animation: 'fade-in',
                showBackdrop: true,
                maxWidth: 200,
                showDelay: 0
              });

        $scope.prayers = Prayers.query().$promise.then(function(result){
         console.log(result);
         $scope.prayers=result;
         $ionicLoading.hide();
        }, function(error){
         console.log(error);
          $ionicLoading.hide();
          $ionicLoading.show({
            template: 'Network Error',
            scope: $scope
          });
          $timeout(function() {
             $ionicLoading.hide();
          }, 2000);
        })
    })

and make services back to its original form

angular.module('starter.services', [])

    .factory('Prayers', function($resource) {
        return $resource(base_url+'/wp/v2/posts');
    });

Answer 2

Muhammad, I had to tweek your answer a little to get it to work for me. Here's my controller.

.controller('PrayersCtrl', function($scope, $ionicLoading, Prayers, $timeout) {
  $ionicLoading.show({
    template: '<ion-spinner icon="spiral" class="spinner-positive"></ion-spinner> <br>Loading...',
    noBackdrop: true,
    animation: 'fade-in'
  });
  Prayers.query().$promise.then(function(result){
    $scope.prayers = result;
    $ionicLoading.hide();
  }, function(error) {
    // error handling here
    $ionicLoading.hide();
    $ionicLoading.show({
      template: "unable to connect",
      noBackdrop: true
    });
    $timeout(function() {
       $ionicLoading.hide();
    }, 2000);
  })
})