angularjs зависит выпадающего значение опции

Question

я успешно создал зависимое выпадающее меню с использованием angularjs, но у меня есть небольшая проблема:
мне нужно определить значение каждой опцию тега, поскольку она устанавливается автоматически угловом процессором.
вот мой HTML код:

  <div ng-controller="CountryCntrl"> 

       <select id="country" ng-model="states" ng-options="country for (country, states) in countries"> 
        <option value=''>Choose</option> 
       </select> 

       Departement: 
       <select id="state" ng-disabled="!states"> 
       <option value="">Choose</option> 
       <option ng-repeat="state in states" value="{{state.id}}">{{state.dep}}</option> 
       </select> 
      </div> 

      <br/> 
      <input type="submit" value="go"> 

и вот мой angularjs код:

<script> 
    var Aplic = angular.module("Aplic", []); 

    Aplic.controller('CountryCntrl', function($scope){ 

     $scope.countries = { 
         'Aquitaine': [ {'id':'22', 'dep': "Dordogne"}, { 'id':'31', 'dep' : "Gironde"} ], 
         'Auvergne': [ {'id' : '3', 'dep' : "Allier"}, {'id' : '15', 'dep' : "Cantal"} ] 
         };    
    }); 

    </script> 

Повторяю, я успешно установить значение для во втором раскрывающемся списке, но для первого он автоматически берет имя страны переменной.

так как я должен изменить свой код, чтобы дать каждому тегу параметра в первом раскрывающемся списке определенное значение.

Чтобы хорошо понять мою идею, пожалуйста, проверьте значения в каждом выпадающем списке. вот мой рабочий отрывок на плункер:
http://embed.plnkr.co/VBdxGDQNOJSHeGVfloo2/preview
любая помощь будет оценена.

---

вот что я хочу сделать:

<select id="state" ng-model="cou"> 
         <option value="">Choisir</option> 
         <option ng-repeat="cou in countries" value="{{cou.id}}">{{cou.name}}</option> 
        </select> 

        <select id="state" ng-disabled="!cou"> 
         <option value="">Choisir</option> 
         <option ng-repeat="state in cou.states" value="{{state.id}}">{{state.dep}}</option> 
        </select> 

но теперь второй выпадающий не работает, если вы можете мкВт, что problemwill быть решена

Answer 1

Вот пример реализации для вы. Это будет поддерживать значения в теге опций.

<div ng-app="Aplic" ng-controller="CountryCntrl"> 
    <select id="country" ng-model="selectedCountry" ng-options="country.id as country.name for country in countries track by country.id"> 
     <option value="">Choose</option> 
    </select>Departement: 
    <select id="state" 
    ng-model="selectedState" 
    ng-disabled="!selectedCountry" 
    ng-options="state.id as state.dep for state in ((countries | filter:{'id':selectedCountry})[0].states) track by state.id"> 
     <option value="">Choose</option> 
    </select> 


    <div>selectedCountry id: {{selectedCountry}}</div> 
    <div>selectedState id: {{selectedState}}</div> 
</div> 

Контроллер:

$scope.countries =[ 
    { 
    'id': '1', 
     'name': "Aquitaine", 
     'states': [{ 
     'id': '22', 
     'dep': "Dordogne" 
    }, { 
     'id': '31', 
     'dep': "Gironde" 
    }] 
    }, 
    { 
    'id': '2', 
     'name': "Auvergne", 
     'states': [{ 
     'id': '3', 
     'dep': "Allier" 
    }, { 
     'id': '15', 
     'dep': "Cantal" 
    }] 
    }]; 

Working demo