Angularjs - select values according to other select

Question

I’m new to Angularjs and as I’m starting I still have many doubts... I would like to know how to make a secondary have values according to a primary, as in these car sites, you select the brand and the models appear according to the chosen brand.

Answer 1

You need to set an ngChange for when the value of the first select is changed.

<select ng-model="marca" ng-options="marca.id as marca.nome 
    for marca in marcas" ng-change="CarregarModelo(marca)">
    <option value="">Selecione a Marca</option>
</select>

<select ng-model="modelo" ng-options="modelo.id as modelo.nome 
    for modelo in modelos">
    <option value="">Selecione o Modelo</option>
</select>

And in the controller you create the ng-change function to list in the second select.

function ctrl($scope) {
    $scope.CarregarModelo = function(marca){
       $http.get(url).success(function(res){
           $scope.modelo = res.data;
       });
    }
}