title: How to show loading page while another page is loading [AngularJS]
body: <p>How can I do <a href="http://vladimir.in/" rel="nofollow">this</a> with Angular. I wana show full page with animation while another page is loading and when that page is loaded I wana display...</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>Also I have controller, I need to wait to conroller is loaded... And after controller is loaded and html added to page I need to remove loading page and show content.</p>
  
  <pre><code> .controller('CommentsCtrl',function($scope,$http,$routeParams){
                $scope.param = $routeParams.id;
                $scope.comments = [];
                $http.get("/api/comments/"+ $scope.param)
                .success(function(data){
                 //GET ALL USER AND COMMENTS TOGETHER
                 $.each(data,function(index,value){
                     if(value.user){
                      $.each(value.user,function(index1,value1){
                          var new_object = $.extend({}, value, value1);
                          $scope.comments.push(new_object);
  
                      });
                     }
                 });
  });
  </code></pre>
  
  <p><strong>End Edit</strong></p>
  
  <p>Here is my try but it will not wait till full page load It will just wait till get req is finished...</p>
  
  <p>Any idea?</p>
  
  <pre><code>angular.module('loading')
          .directive('loading', loading);
  
  
  function loading($http) {
      var loadingSniper = {
          link: link,
          restrict: "AE"
      };
  
      return loadingSniper;
  
      function link(scope, elm, attrs)
      {
          scope.isLoading = function () {
  //            console.log('Remaining: ' + $http.pendingRequests.length);
              return $http.pendingRequests.length &gt; 0;
          };
  
          scope.$watch(scope.isLoading, function (v)
          {
              if (v) {
                  elm.show();
              } else {
                  elm.hide();
              }
          });
      }
  
  }
  </code></pre>