私のフォームでは、Angular は選択ボックスの変更を監視し、選択したデータを使用して後で選択ボックスのデータをロードします。これは正常に動作しますが、ウォッチャーの初期化を除き、Angular は選択されたオプション (サーバーによって提供される) で既存のデータを保持せず、新しいデータを即座にロードします。
<form action="join" method="post" ng-controller="JoinController">
...
<select name="state" ng-model="state">
<option value="">Select...</option>
...data provided on initial load...
</select>
<select name="institution_id" ng-model="institutionId" ng-options="option.id as option.name for option in institutionOptions">
<option value="">{{ defaultInstitutionOption }}</option>
...data provided on initial load...
</select>
...
</form>
そしてAngularコントローラー...
app.controller('JoinController', function($scope, $http) {
$scope.defaultInstitutionOption = "Select state...";
$scope.$watch('state', function() {
$scope.defaultInstitutionOption = "Loading institutions...";
$http.get('institutions?state=' + encodeURIComponent($scope.state)).success(function(institutions) {
$scope.institutionOptions = institutions;
$scope.defaultInstitutionOption = "Select...";
});
}, true);
}