title: Data is not populating in Table
body: <p>I am facing issue while displaying data in table.</p>
  
  <p>I am using a customservice to fetch data from a json file and then inserting that data into $rootScope of an object.</p>
  
  <p>But when I run the view,it comes blank with no errors.In the view,i am using below line of code in the view to iterate the array of objects "books"</p>
  
  <p></p>
  
  <p>Please guide me.</p>
  
  <p>controller.js</p>
  
  <pre><code>Controllers.controller('BookListCtrl_Student', ['$scope','$rootScope','$http','$location','BookData',
  function ($scope, $rootScope, $http, $location, BookData) {
      $rootScope.books=[];
      $rootScope.books.push(BookData.getData());
      $scope.bookLists = ['All Books', 'Available Books'];
      $scope.selection = $scope.bookLists[0];
  
      $scope.backToLogin = function() {
          $location.path("/main");
      }
  }    
  ]);
  </code></pre>
  
  <p>customservice.js</p>
  
  <pre><code>Controllers.factory('BookData',['$http',function(http){
  return {
      getData: function() {
          return http.get('data/books.json').then(function(result){               
              return result.data;               
              });
      }
  };
  }
  ]);
  </code></pre>