I have 2 select statement which the first select is populated by my first webservice request. User selects the desired data in the first select, in which will trigger the onChange method to retrieve first select object, run webservice again to retrieve another set of datas and populate the 2nd select statement.
HTML:
<div class="input-label">
Select Kittens:
</div>
<select
ng-model ="options"
ng-options ="option.name for option in options"
ng-change="onChange(options)">
<option>--</option>
</select>
<br>
<div class="input-label">
Select Age:
</div>
<select
ng-options ="detail.age for detail in details">
<option>--</option>
</select>
Controller:
.controller("ctrl",['$scope',function($scope){
$scope.options = [
{id:1, name:'typeA'},
{id:2, name:'typeB'},
{id:3, name:'typeC'},
{id:4, name:'typeD'}
]
$scope.onChange = function(item){
console.log("Hi world!");
console.log(item);
$scope.details = [
{id:1, age:'11'},
{id:2, age:'10'},
{id:3, age:'9'},
{id:4, age:'6'}
]
};
}])
Issues:
1) After selecting the 1st select , the value just disappears from the select box, but the value(object) is passed over to the onChange function successfully
2) Unable to populate the 2nd select box
I have created a plunkr to replicate my problem(without the webservice). Thanks!