javascript - ng repeat list dropdown to filter another list dropdown -

i have 2 drop down lists following:

html

<div class="col-md-3">     <select class="form-control"  ng-model="select1">         <option value="" selected disabled>select first</option>         <option  ng-repeat="item in items" value="{{item.name}}">{{item.name}}</option>     </select> </div> <div class="col-md-2">     <select class="form-control"  ng-model="select2">         <option value="" selected disabled>select second</option>         <option ng-repeat="item in items|filter:itemfilter" value="{{item.stuff}}">{{item.stuff}}</option>     </select> </div> 

my list of items looks like:

[   {name:"foo1", stuff:["bar1","bar2","bar3"]},   {name:"foo2", stuff:["bar4","bar5","bar6"]},   {name:"foo3", stuff:["bar7","bar8","bar9"]} ] 

controller

 $scope.itemfilter = function (item) {          return item.name == $scope.select1; }; 

objective

when select foo1 first dropdown, second dropdown should have 3 options bar1,bar2,bar3

current

when select foo1 first dropdown, second dropdown contains 1 option ["bar1","bar2","bar3"]

one way use method filter, , call filter method on ngchange of first drop-down.

<select class="form-control"  ng-model="select1" ng-change="filteritems()"> 

here definition of filter method

$scope.filteritems = function() {   var index = 0;   (var = 0; < $scope.items.length; i++) {     if ($scope.items[i].name == $scope.select1) {       index = i;       break;     }   }   $scope.filtereditems = $scope.items[index].stuff; }; 

and bind second drop-down filtered list

<select class="form-control"  ng-model="select2">     <option value="" selected disabled>select second</option>     <option ng-repeat="item in filtereditems">{{item}}</option> </select> 

here working plunkr