Estoy tratando de recrear un problema real, asi que puede parecer raro este ejemplo, pero de seguro resolverá mi problema. Agradecería mucho si me pueden ayudar.
tengo un botón, que al hacer click sobre él, genera 3 dropdowns dinámicos( se alimenta una variable llamada $scope.dropdown, con la lista de los animales que contiene el array $scope.aAnimals, actualmente existen 3 elementos, pero en un futuro pueden ser "n" elementos).
Despues de esto, quiero que cada dropdown tenga un valor diferente, por ejemplo, que el primer dropdown tenga el primer animal, el segundo dropdown el segundo, el tercer dropdown el siguiente. He intentado muchas cosas, pero no he podido lograrlo.
<div ng-repeat='item in dropdown'>
<select class="form-control animal" ng-model='MyAnimals' id='animal{{$index}}' name='animal{{$index}}'
ng-options="opt as opt.animal for opt in aAnimals track by opt.animal">
<option style="display:none" value="">Select an animal</option>
</select>
</div>
<button ng-click='add()' >generate</button>
$scope.obj = {}
$scope.aAnimals=
[
{ "animal": "cat"}, //first dropdown
{ "animal": "dog"}, //second dropdown
{ "animal": "parrot"} //third dropdown
]
$scope.add=function(){
$scope.dropdown=[];
for(var i in $scope.aAnimals){
$scope.dropdown.push({ "animal": $scope.aAnimals[i].animal })
//$('.animal')[i].value=$scope.aAnimals[i].animal;
}
}
Cuando se generen los dropdown deberia tener algo asi:
{ "animal": "cat"}, //first dropdown
{ "animal": "dog"}, //second dropdown
{ "animal": "parrot"} //third dropdown