Vamos pelo problema clássico de selecionar uma cidade em uma combo e mostrar seus bairros em outra. Tudo bem? Essa é a marcação HTML:
<div ng-controller="CidadesController">
<select name="grupo" ng-change="buscarBairros(cidade)"
ng-model="cidade.sigla"
ng-options="cidade.sigla as cidade.nome for cidade in cidades">
<option value="">Escolha um Cidade</option>
</select>
<select name="grupo"
ng-model="bairro.nome"
ng-options="bairro.nome as bairro.nome for bairro in bairros">
<option value="">Escolha um Bairro</option>
</select>
</div>
Veja que os dois selects
estão sendo gerenciados por CidadesController
. Veja que no primeiro select, temos a diretiva ng-chance
. Ela chamará um código em seu controller toda vez que o valor do select mudar. Quando você selecionar uma cidade, ele vai buscar os bairros daquela cidade e atualizará o outro select.
Seu controller:
angular.module('alurapic').controller('CidadesController', function($scope) {
$scope.bairros = [];
$scope.cidades = [{sigla: 'RJ', nome: 'Rio de Janeiro'}, {sigla: 'SP', nome: 'São Paulo'}];
$scope.buscarBairros= function(cidade) {
// claro, aqui você teria que acessar um serviço, passar o ID da cidade e receber a lista de bairros. Aqui fiz algo fake só para ilustrar.
if(cidade.sigla == 'RJ') {
$scope.bairros = [{nome: 'Maracanã'}];
} else {
$scope.bairros = [{nome: 'São Paulo'}];
}
};
});
Veja que como estamos alterando a lista de bairros no controller, automaticamente o segundo select será atualizado para exibir a lista de bairros, tudo devido ao data binding do Angular.
Eu teste aqui jogando esse código no projeto rapidinho e funciona.
Espero ter ajudado, bom estudo!