javascript - Prevent loader from disappearing before all data is retrieved from service angularjs -

i using angularjs ui-router transition state state , loader attached each view. problem when transitioning 1 state , loader initiated, loader disappears before contents web service pulled in , other requests completed.this first time trying implement angularjs's ui-router.

i have tried use:

app.run(function($rootscope,$cookies){   // fired when transition begins.   $rootscope.$on('$statechangestart',function(e, tostate, toparams, fromstate, fromparams){       $rootscope.loading = true;   });    // fired once state transition complete   $rootscope.$on('$statechangesuccess',function(e, tostate, toparams, fromstate, fromparams){       $rootscope.loading = false;   }); }); 

i have tried utilize resolve method:

... .state('loan-new',{    url: '/loan-new/:id',    templateurl: base_url+'js/pages/loan-new.html',    controller: 'loancontroller',    resolve: {       loannew: function($q, client, $stateparams, $http) {         var defer = $q.defer();         if(client.getallinformation($stateparams.id) !== undefined)          {           $http.get(base_url+'client-loan-types').success(function(data) {            })           .then(function(){              client.getallinformation($stateparams.id).then(function(data) {               defer.resolve(data);               console.log('app data');               console.log(data);             });            });         }          else          {           defer.reject(data);         }          return defer.promise;     }   } }) ... 

---

and lastly tried code below no avail.

app.controller('loadingcontroller', ['$scope', '$http', '$rootscope', '$stateparams', 'client', '$q', function($scope, $http, $rootscope,  $stateparams, client, $q) {    $rootscope.loading = true;    // $scope.$on('load', function(){$scope.loading = true});   // $scope.$on('unload', function(){$scope.loading = false});    $scope.$on('$viewcontentloading', function(event, viewconfig){      console.log('content loading: ', event, viewconfig)      return client.getallinformation($stateparams.id);   });     $scope.$on('$viewcontentloaded', function(event) {     $rootscope.loading = false;     console.log('loaded loaded loaded');   }); }]); 

---

html

    <!-- css loader -->     <div id="overlay" ng-show="loading">         <div class="sk-cube-grid">           <div class="sk-cube sk-cube1"></div>           <div class="sk-cube sk-cube2"></div>           <div class="sk-cube sk-cube3"></div>           <div class="sk-cube sk-cube4"></div>           <div class="sk-cube sk-cube5"></div>           <div class="sk-cube sk-cube6"></div>           <div class="sk-cube sk-cube7"></div>           <div class="sk-cube sk-cube8"></div>           <div class="sk-cube sk-cube9"></div>         </div>         <p>loading...</p>     </div>  <div class="content-wrapper ng-cloak" ng-controller="loadingcontroller">     <div class="container wrap-content ng-cloak" ui-view>      </div> </div> 

---

service

app.factory('client', ['$http','$q',function($http,$q){      var client = {};//empty oject store multiple function   ...  //get of client's personal information  client.getallinformation = function(ucin){       var deferred = $q.defer(); //create promise completed getting client's information       $http.get(losapi+ucin).success(function(data){             deferred.resolve(data.data); //when success resolve promise accepting data web serivces       }).error(function(){            return deferred.reject(); //promise not completed reason       });       return deferred.promise; //return promise  };      return client }]);   ... 

---

any assistance problem appreciated.thanks.

you should $rootscope.loading = false after call has finished.

 client.getallinformation = function(ucin){       var deferred = $q.defer(); //create promise completed getting client's information       $http.get(losapi+ucin).success(function(data){             deferred.resolve(data.data); //when success resolve promise accepting data web serivces          $rootscope.loading = false;       }).error(function(){            return deferred.reject(); //promise not completed reason       });       return deferred.promise; //return promise  };