Angularjs ng-change is not firing

Question

Hi I am developing Angularjs Application. I have two dropdownlist boxes. Whenever i select something in first dropdown then based on the value of firstdropdown, second firstdropdown will load(Cascading dropdownlistbox). I am using Ajax calls for binding data to dropdownlist . Below is my index.html where i have two dropdownlistboxe's.

<select ng-model="selectedMake" ng-options="b for b in list" id="brand" ng-change="getModel(selectedMake)">
 <option value="">-- Select a Make --</option>
 </select>
 <select ng-model="selectedModel" ng-options="b for b in Modellist" id="brand">
 <option value="">-- Select a Model --</option>
 </select>

This is my controller code. var arrMakes = new Array();

$http.get("http://localhost:4739/api/AutoLease/GetVehicleMake").success(function (data) {
        $.map(data, function (item) {
            arrMakes.push(item.MakeName);
        });
        $rootScope.list = arrMakes;
    }).error(function (status) {
    });
    $rootScope.getModel = function (selectedMake) {
        debugger;
        var arrModel = new Array();
        $http.get(url + 'api' + '/AutoLease/' + selectedMake + '/GetVehicleModel').then(function (response) {
            $.map(data, function (item) {
                arrModel.push(item.ModelName);
            });
            $rootScope.Modellist = arrModel;
        });
    }

I am able to load first dropdown. In first dropdown i have getModel function in ng-change event. This event is not firing. I am not getting any error message too. May I know something i am missing here? Thanks in advance.

Answer 1

Use $scope instead of $rootScope

$scope.getModel = function (selectedMake) {
        debugger;
        var arrModel = new Array();
        $http.get(url + 'api' + '/AutoLease/' + selectedMake + '/GetVehicleModel').then(function (response) {
            $.map(data, function (item) {
                arrModel.push(item.ModelName);
            });
            $rootScope.Modellist = arrModel;
 });

also there could be another reason that value of the selected is same , so that ng-change does not get fired. check your option values if they are different.

Answer 2

try this. when using then for get response it should be like this

response.data

 $http.get(url + 'api' + '/AutoLease/' + selectedMake + '/GetVehicleModel').then(function (response) {
        $.map(response.data, function (item) {
            arrModel.push(item.ModelName);
        });
        $rootScope.Modellist = arrModel;
    });

Demo

Answer 3

AS others advice you use $scope instead of $rootScope

But if you have to use it for other raison ( like sharing a global variable ) you have to prefix with $root in view like this

<select ng-model="selectedMake" ng-options="b for b in list" id="brand" ng-change="$root.getModel(selectedMake)">