Unable to populate 2nd select statement

Question

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!

Link: http://plnkr.co/edit/tqI0a83PiIHNUkKLj1WF?p=preview

Answer 1

use this code: DEMO

  <div class="input-label">
    Select Kittens:
  </div>
  <select ng-model="name" ng-options="option.name for option in options" ng-change="onChange(name)">
    <option>--</option>
  </select>

  <br>

  <div class="input-label">
    Select Age:
  </div>
  <select ng-model ="age" ng-options="detail.age for detail in details">
    <option>--</option>
  </select>

The name of your first ng-model = "options" but inside controller you also use $scope.options as an array of object.

Moreover, In second <select> there is no ng-model. But ng-options needs ng-model.

Answer 2

From Docs

The select directive is used together with ngModel to provide data-binding between the scope and the <select> control (including setting default values).

Additionally you need to change 1st select ng-model as ng-repeat is going on options and ng-model is also same as that of options, should change it to someOpetion

Markup

<select ng-model="someOpetion" 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" ng-model="someDetails">
    <option>--</option>
</select>

Plunker

Answer 3

I got your problem.

Here is the fixed version of your plunker

Plunker

You need to add two scope variable in your controller to use these as your ng-model.

The issue for your second select was it has no ng-model attribute. Select must have ng-model attribute.