Угловой JS Router и ng-repeat привязаны к $ http

Question

Я использую угловой маршрутизатор для создания SPA, который извлекает данные из внешней базы данных на основе предпочтений пользователя и чем отображает данные внутри таблицы. Вот что у меня есть установка

Маршрутизатор:

App.config(function($routeProvider) { 
     $routeProvider 
      .when('/', { 
       templateUrl : 'pages/home.php', 
       controller : 'mainCtrl' 
      }) 
      .when('/territoryprint', { 
       templateUrl : 'pages/print.php', 
       controller : 'mainCtrl' 
      }) 
      .when('/territorymap', { 
       templateUrl : 'pages/map.php', 
       controller : 'mainCtrl' 
      }); 
    }); 

Далее я заполнить массив с помощью сервиса, который использует $ HTTP

fusiotablesService.getRecords($scope.tablenumber).then(
      function(success){ 
       for(var i=0;i<success.data.rows.length;i++){ 
        var obj= { 
         f1: success.data.rows[i][0], 
         f2: success.data.rows[i][2], 
         f3: success.data.rows[i][3], 
         f4: success.data.rows[i][6] 
        }; 
        $scope.Records.push(obj); 
       } 
       $scope.$apply(); 
      });  
    } 

В страницах/print.php У меня есть следующие настройки:

<table class="table table-striped"> 
    <thead> 
     <tr class="text-center"> 
     <th>Territory #</th> 
     <th>Bell Code</th> 
     <th>Full Address</th> 
     <th>{{ Records.length }}</th> 
     </tr> 
    </thead> 
    <tbody> 
    <tr ng-model="Records" ng-repeat="t in Records"> 
     <td>{{ t.f1}}</td> 
     <td>{{ t.f2 }}</td> 
     <td>{}</td> 
     <td>{}</td> 
     </tr> 
    </tbody> 
    </table> 

Однако ng-repeat не создает <td> e lement и Records.length равен 0.

Почему ng-repeat не связан с Records? Является ли мой подход неправильным? Заранее спасибо за вашу помощь!

EDIT Вот console.log из $ scope.Records

Вот полный контроллер

jwteApp.controller("mainCtrl",function($scope,$location,fusiotablesService,NgMap){ 
     /*====== INDEX ======*/  
     $scope.territoryRecords=[]; 
     $scope.territories=[]; 
     $scope.selectedterr=-1; 
     $scope.selectedoption="SELECT OPTION"; 
     fusiotablesService.getTerritories().then(function(success){   
      for(var i=0;i<success.data.rows.length;i++){ 
       $scope.territories.push(success.data.rows[i][0]); 
      } 
      },function(error){ 
       console.log(error.data); 
      }); 

     $scope.indexFormClick = function(){ 
      var path=""; 
      if($scope.selectedoption=="SELECT OPTION"){   
       alert("Please select an option"); 
      } 
      else if($scope.selectedterr==-1){ 
       alert("Please select a territory"); 
      } 
      else{ 
       switch($scope.selectedoption){ 
        case "print" : 
        populateRecords(); 
        path = "/territoryprint"; 
        break; 
        case "map": 
        path = "/territorymap"; 
        break; 
        default: 
        alert("Please select an option"); 
       }    
       $location.path(path);   
      } 
     } 

     /*====== TERRITORY PRINT ======*/ 
     function populateRecords(){ 
      fusiotablesService.getTerritoryRecords($scope.selectedterr).then(
       function(success){ 
        for(var i=0;i<success.data.rows.length;i++){ 
         var terRecObj = { 
          number : success.data.rows[i][0], 
          address : success.data.rows[i][2], 
          bellcode : success.data.rows[i][3], 
          notes : success.data.rows[i][6] 
         }; 
         $scope.territoryRecords.push(terRecObj); 
        } 
        $scope.$apply(); 
        console.log($scope.territoryRecords); 
       }, 
       function(error){ 
        console.log(error.data); 
       } 
      );  
     } 

    }); 

Answer 1

Вот некоторые рабочий пример (без вызова любого удаленного API) - jsfiddle.

В контроллере вы делаете что-то вроде:

$scope.Records = []; // initialization 
var obj = { 
    f1: 'some territory', 
    f2: 'some bell code', 
    f3: 'some full address', 
    f4: 'some number' 
}; 
$scope.Records.push(obj); 

И, если я прав вы пропустили инициализацию вашего $scope.Records массива (см. Выше)

Кроме того, вам не нужно звонить $scope.$apply сразу после звонка push.

---

Edit:

Похоже, причина - вы называете API и сразу после этого вы звоните $location.path(path);. Это означает, что вы маршрутизируете местоположение , и ваш контроллер будет воссоздан. Поэтому ваш массив снова будет пустым (как и до любого вызова API).