具有異步功能的ng-model怪異行為

Question

以下是下拉選擇代碼：

<select ng-model="filter.area">
    <option value="">Select your location</option>
    <option ng-repeat="area in areaNames" value='{{ area.area_name }}'>{{ area.area_name }}</option>
</select>

在調用Async函數之前，先在控制器中設置ng-model ：

$scope.filter.area = $cookies['filterArea'];
// which evaluated to some value lets say 'Bole'

現在帶有異步功能：

query.find({
   success: function(results_area) {
     $scope.$apply(function() {

        $scope.areaNames = results_area;

        for (var i = 0; i < $scope.areaNames.length; i++) {
          $scope.areaNames[i].area_name = $scope.areaNames[i].get('name');
        };

      });
   },
   error: function(error) {
      console.log("error in fetching area info....");
    }
   });

ng-model沒有更新。 知道這里有什么問題嗎？

要觀看演示，請轉到此處： http : //peppy-avatar-762.appspot.com/

然后選擇“亞的斯亞貝巴”並選擇“伯爾”作為區域，然后單擊查找食物！ 檢查左側的區域過濾器。 ng-model沒有更新！

Answer 1

如果選項延遲加載，請使用ng-options而不是ng-repeat on option

<select data-ng-model="selectedItem" 
        data-ng-options="item for item in items track by item">
</select>

工作Plnkr