Angularjs cascade dropdown with json object array

Question

i'm trying to understand how controllers works in angularjs using cascade dropdowns. But my second dropdown is not being populated based on the previous dropdown value.

My JSON arry result:

[{
    "id": "23031",
    "fabricante": "ALFA ROMEO",
    "modelo": "33",
    "motor": "1.3 \/ 1.3 ie",
    "combustivel": "Gasolina \/ GNV",
    "ano_vela": "",
    "ngk": "",
    "ngk_green": "BPR6EY",
    "gap": "0,7",
    "ano_cabo": "",
    "cabos_ngk": "",
    "inicio": "",
    "fim": "",
    "seguimento": "4 RODAS",
    "ano_bobina": "",
    "bobina_ngk": "",
    "pais": "Argentina",
    "n_processo": "0"
}, {
    "id": "23057",
    "fabricante": "ARO",
    "modelo": "Serie 10",
    "motor": "1.4",
    "combustivel": "Gasolina \/ GNV",
    "ano_vela": "",
    "ngk": "BP6HS",
    "ngk_green": "",
    "gap": "0,7",
    "ano_cabo": "",
    "cabos_ngk": "",
    "inicio": "",
    "fim": "",
    "seguimento": "4 RODAS",
    "ano_bobina": "",
    "bobina_ngk": "",
    "pais": "Argentina",
    "n_processo": "0"
}]

My Controller EDITED :

angular.module('starter.controllers', [])

.controller('fabricanteController', ['$scope','$http', function($scope, $http) {
$http.get('JSON_PATH').success(function (data) {
    $scope.fabricantes = data;
    $scope.$watch('fabricante', function(newVal) {
    if (newVal) $scope.modelo = data;
    console.log($scope.modelo);
});
});
}]);

And my HTML:

<label class="item item-input item-select">
    <div class="input-label">
        Fabricante
    </div>
    <select ng-model="fabricante" ng-options="fab.fabricante for fab in fabricantes track by fab.fabricante">
        <option value="" disabled="disabled">Selecionar</option>
    </select>
</label>

<label class="item item-input item-select">
    <div class="input-label">
        Modelo
    </div>
    <select ng-model="modelo" ng-options="mod.modelo for mod in fabricantes">
        <option value="" disabled="disabled">Selecionar</option>
    </select>
</label>

Tried to look around how to make it work but no luck. Any idea why?

Answer 1

Your watch isn't firing because you're passing in a string, not a variable. Also, I don't know where you're checking newVal, but it won't work like that..

Basic implementation:

$scope.$watch($scope.fabricante, function() {
    $scope.modelo = data;
    console.log($scope.modelo);
});

With newVal checking:

$scope.$watch($scope.fabricante, function() {
    if($scope.modelo!=data)
    {
      $scope.modelo = data;
      console.log($scope.modelo);
    }

});

You can also use ng-change on the Select box, which will fire on any change.

<select ng-model="fabricante" ng-change="doSomething()" ng-options="fab.id for fab in fabricantes"></select>

Answer 2

If you wanna show the 'modelo' property of the selected 'fabricante' object you must point the ng-option of your second DDL to a new $scope array variable such:

$scope.modelos = [{"modelo": newVal.modelo}];

Your ng-options should be:

<select ng-model="test" ng-options="mod.modelo for mod in modelos">

Here is a working JSFiddle

Hope this helps.