cancel
Showing results for 
Search instead for 
Did you mean: 

angularjs dependent dropdown loads wrong data

angularjs dependent dropdown loads wrong data

I have a fully working dependent dropdown using AngularJS and sometimes it's showing wrong data after selecting the parent dropdown, sometime it loads different data even the selected in parent dropdown is not that.

In the database structure there's a relationship of region_id, province_id, city_id so I don't think it's a backend problem.

Code:

<select name="region" name="region" ng-model="frm.region" ng-change="frm.provinces()" required>
    <option ng-repeat="region in regions.regions" ng-value="region.id">@{{ region.name }}</option>
</select>

<select name="province" name="province" ng-model="frm.province" ng-change="frm.cities()" required>
    <option ng-repeat="province in provinces.provinces" ng-value="province.id">@{{ province.name }}</option>
</select>

<select name="city" name="city" ng-model="frm.city" ng-change="frm.barangays()" required>
    <option ng-repeat="city in cities.cities" ng-value="city.id">@{{ city.name }}</option>
</select>

<select name="barangay" name="barangay" ng-model="frm.barangay" required>
    <option ng-repeat="barangay in barangays.barangays" ng-value="barangay.id">@{{ barangay.name }}</option>
</select>

var vm = this;

$http.get('/regions').success(function (data) {
    $scope.regions = data;
});

vm.provinces = function(){  
    $http.post("provinces", {'region_id':vm.region})  
    .success(function(data){  
        $scope.provinces = data;
    });  
}
vm.cities = function(){  
    $http.post("cities", {'province_id':vm.province})  
    .success(function(data){  
        $scope.cities = data;
    });  
}
vm.barangays = function(){  
    $http.post("barangays", {'city_id':vm.city})  
    .success(function(data){  
        $scope.barangays = data;
    });  
}

it is full working code, but sometimes it loads wrong province, even the region selected is not the parent of that provinces

is there something to do everytime the region changes, do I need to set others to empty?