リストの前にフォームが入力されたときに選択リスト内の適切なアイテムを選択する

Question

たとえば、select要素で都市リストを指定して顧客を編集するためのフォームがあります。実際のフォームには多くのリストがありますが、これは今のところ行います。

フォームには、/ customer/{customerId}という名前の残りのAPI呼び出しが設定されます。

リストには、/ citiesという残りのAPI呼び出しが行われます。

コールは$ http.getを使用してコントローラで順番に行われ、もう1つは$ resource get（以下のコードスニペットではありません）を介して取得されます。

問題は、顧客データを取得するための呼び出しが最初に戻った場合、フォームは適切な都市ではなくリストの最初の都市を選択することです。ここで

は、いくつかのコードスニペットは、次のとおりです。

HTML：

<select id="Select3" class="form-control" ng-model="formData.CityId"> 
    <option ng-repeat="j in Cities" value="{{j.CityId}}">{{j.City}}</option> 
</select> 

コントローラー：

.controller('customerInfoCtrl', ['$scope', '$http', '$modal', '$location', 'CustomerApi', function ($scope, $http, $modal, $location, CustomerApi) { 
    $http.get('../api/v1/cities').success(function (data) { 
     $scope.Cities = data; 
    }); 

    $scope.formData = CustomerApi.get({ id: $scope.customerId }, function() { 
     ... 
    });  
    .... 

私はこれをどのように修正すればよいですか？フォームにはたくさんのリストがあることに注意してください。体系的に適用できるパターンはありますか？

私は約$scope.$apply()または$scope.$apply(fn)を知っています。都市を取得するコールの成功関数でこれらのいずれかを呼び出す必要がありますか？

おかげ

更新：

-オプションをngのために変換するトリックを行うようです。私はより多くのテストをしなければならない。

<select id="Select3" class="form-control" ng-model="formData.CityId" ng-options="j.CityId as j.City for j in Cities"> 
</select> 

別の更新：あなたは他の前にいくつかのデータのロードは、コールバック関数を使用していることを確認したい場合はhttp://plnkr.co/edit/Se8OIuxYBv4QXeH3Jgqh?p=preview

Answer 1

は、あなたが得る：

は、私はあなたが問題を見ることができるplnkrを作成しました両方のget（）メソッドを使用します。 あなたが最初の都市をロードしたいのであれば、それはそのようなことが考えられます。

$http.get(../api/v1/cities').success(function (data) { 
    $scope.Cities = data; 
    //now that the cities are loaded, you can loead something else here. 
    $scope.formData = CustomerApi.get({ id: $scope.customerId }, function() { 
    //this will always be loaded after cities 
    }); 
    $scope.loadSmthElse.... 
}