Both drop down auto selected using AngularJS when second DD is depend on first

Question

I have data in table in that there are list of cities .when I click on update on same form data is fill-up into fields.I want that both my drop down,Country and Sate should be auto selected from database on base of city. My Country is getting filled but state is not which is filled up on the basis of country. I want to do this using AngularJS. I have used ng-repeate to fill drop-down and ng-selected to select the data. AngularJS version I am using is 1.6.8

 **HTML:-**
                   <div class="col-md-6" id="StateNameDIV">
                                        <label for="lblSate" class="control-label">Select State</label>
                                        <select id="ddlType" class="full-width form-control" ng-model="insert.State_ID" ng-change="citylistname(insert.State_ID)">
                                            <option value="{{state.State_ID}}" ng-repeat="state in statedata" ng-selected="insert.State_ID==state.State_ID">                        {{state.State_Name}}</option>
                                        </select>

                                    </div>

                                    <div class="col-md-6" id="CityDIV">
                                        <label for="lblCity" class="control-label">Select City</label>
                                        <select id="ddlCity" class="form-control" ng-model="insert.City_ID">
                                            <option value="{{city.City_ID}}" ng-repeat="city in citydata" ng-selected="insert.City_ID==city.City_ID">
                                                {{city.City_Name}}
                                            </option>
                                        </select>
                                    </div>



**JS:-**

function statelistname() {
        var data = $http.get('/State/StateList');
        data.then(function (data) {
            $scope.statedata = data.data.StateList;
            console.log($scope.statedata);
        }); data.catch(function (data) {
            alert(data.data);
        });
    };
    statelistname();

$scope.citylistname = function () {
        console.log(this.insert.State_ID);
        var subdata = this.insert.State_ID;

        var data = $http.post('/City/CityList/' + subdata)
        data.then(function (data) {
            $scope.citydata = data.data.CityList;
            console.log($scope.citydata);

        }); data.catch(function (data) {
            alert(data.data);
        });
    };

Answer 1

If I correctly understood your problem, I think this helps you

Html

<select class="form-control" id="State" ng-options="x.id as x.title for x in states" ng-change="updateCityList()" ng-model="stateId"></select>

<select class="form-control" id="City" ng-options="x.id as x.title for x in citiesOfState" ng-model="cityId"></select>

Controller

You must create an array which contains cities of a state. This function every time state changes, updates data of city drop down.

$scope.stateId = 13;

function updateCityList() {
    $scope.cicitiesOfState = [];
    $scope.allCities.forEach(function(itm){
        if(itm.stateId == $scope.stateId) $scope.cicitiesOfState.push(itm);
    });
    $scope.cityId = $scope.cicitiesOfState[0].id;
}