上記のコメントであなたが何を求めているのかを正確に誤解しました。これは、一種の遅延バインディング アプローチで実現できます。モデルは通常どおりに表示され、 promisengOption
コールバックはコントローラーのスコープを変更する必要があります。
フィドル: http://jsfiddle.net/XaC8e/1/
HTML
<div ng-app="test" ng-controller="test">
<select ng-model="state1" ng-options="s for s in states" ng-change="loadNewCities(state1);">
</select>
<br/>
<select ng-model="city1" ng-options="c for c in cities[state1]">
</select>
<br/>
<br/>
<select ng-model="state2" ng-options="s for s in states" ng-change="loadNewCities(state2);">
</select>
<br/>
<select ng-model="city2" ng-options="c for c in cities[state2]">
</select>
<br/>
<br/>
<select ng-model="state3" ng-options="s for s in states" ng-change="loadNewCities(state3);">
</select>
<br/>
<select ng-model="city3" ng-options="c for c in cities[state3]">
</select>
<br/>
<br/>
1: {{city1}}, {{state1}}
<br/>
2: {{city2}}, {{state2}}
<br/>
3: {{city3}}, {{state3}}
</div>
JavaScript:
angular.module('test', [])
.controller('test', function ($scope) {
$scope.states = ['ca', 'ny', 'va'];
$scope.cities = {
'ca': ['san diego', 'san francisco']
};
$scope.loadNewCities = function (s) {
if (typeof $scope.cities[s] !== 'undefined') {
// don't load if we already have cities
return;
}
// TODO call a service here, run the $scope.$apply in the callback
if (s == 'ny') {
setTimeout(function () {
// faking a callback
$scope.$apply(function () {
$scope.cities[s] = ['nyc', 'buffalo'];
});
}, 200);
}
if (s == 'va') {
setTimeout(function () {
// faking a callback
$scope.$apply(function () {
$scope.cities[s] = ['richmond', 'chesapeake'];
});
}, 200);
}
};
});