угловая модель js не связывает

Question

Я использую AngularJS, и мне не удается привязать надлежащим образом модели, которым требуется время для загрузки. У меня есть эта услуга называется ListService:

angular.module('3pix').factory('ListService', ['$q', '$timeout', 'underscore', 'Item', 'ItemResource', 
    function ($q, $timeout, _, Item, ItemResource) { 
     var List = function() { 
     }; 
     _.extend(List.prototype, { 
      _addItem: function(item) { 
       this.items || (this.items = []); 
       this.items.push(item); 
      }, 
      loadItems: function() { 
       var scope = this; 
       var deferred = $q.defer(); 
       ItemResource.get_items({id: 39}, function(itemsData) { 
        itemsData.forEach(function(itemData) { 
         scope._addItem(new Item(itemData)); 
        }); 
        deferred.resolve(scope.items); 
       }); 
       return deferred.promise; 
      } 
     }); 

     return List; 
    }]); 

Моя реальная ListService является гораздо более сложным, чем это, но я скопированный только соответствующие части, так что я могу задать свой вопрос четко.
Мой контроллер называется ListController и он получает «список» от маршрутизатора с помощью «Решимость» вариант:

angular.module('3pix').controller('ListController', ['$scope', 'jquery', 'list', 
    function ($scope, $, list) { 
     $scope.list = list; //<-------- Here I got the list, I get it fine from the router 
     list.loadItems(); //<------- Here I load the list's items 
}]); 

На мой взгляд, у меня есть:

<div class="item-wrapper" 
    ng-repeat="item in list.items"> 
    {{item}} 
</div> 

Моя проблема заключается в том, что после того, как элементы загруженный в контроллер, представление не отображает элементы и не рисует ничего. Я попытался обернуть метод успеха loadItems в $ timeout и $ rootScope. $ Apply, но это не помогает. Любая идея, как его решить?

UPDATE
Я последовал совету @Chandermani, и я сделал в моем контроллере:

list.loadItems().then(function() { 
    $scope.items = list.items; 
}); 

Элементы загружаются в представлении, но до сих пор, иногда, когда я обновляю list.items с помощью _addItem(), ничего не происходит, и представление не показывает новые элементы. Я пытался обернуть _addItem() с $ таймаута следующим образом, но это не помогло ни:

_addItem: function(item) { 
     $timeout(function() { 
      this.items || (this.items = []); 
      this.items.push(item); 
     }); 
    } 

Answer 1

Я думаю, что проблема в том, что вы назначаете список возможности для экземпляра службы вместо результата метода.

Изменить его

angular.module('3pix').controller('ListController', ['$scope', 'jquery', 'list', 
    function ($scope, $, list) { 
     $scope.list = list.loadItems() 
}]); 

Также вы можете попробовать это в HTML

ng-repeat="item in list"