Loading progress with spinner

I could not find any well explained tutorial to do this so, once I had it working, I decided to share it. Hope someone else find this helpful.
The main idea is to have a progress indicator on some REST actions as usually you spend some time doing comunication with a remote server. I wanted to have a message, a blocking page and a spinner, showing progress. I use the default spinner of the system so my template is only including the tags of ion-spinner.

.controller('AppCtrll', function($scope, $http, $ionicLoading) {
  $scope.show = function() {
      template: '<p>Loading...</p><ion-spinner></ion-spinner>'

  $scope.hide = function(){

  $scope.login = function() {
    // Start showing the progress
    // Do the call to a service using $http or directly do the call here
    Service.service($scope, $http).success(function(data) {
      // Do something on success for example if you are doing a login
        var alertPopup = $ionicPopup.alert({
            title: 'Login successful!',
    }).error(function(data) {
      // Do something on error
        var alertPopup = $ionicPopup.alert({
            title: 'Login failed!',
            template: 'Please check your credentials!'
    }).finally(function($ionicLoading) { 
      // On both cases hide the loading



It’s almost the same :S well at least maybe the use of spinner can be helpful …

I used the above method, but it is still not showing.

Great works like a charm ! Thank you sir

Works great! Thank you!

thanks you, works great

That’s working for me!Thank you!

hi im beginner in ionic can someone give me course or some help other doc of ionic