Оба выпадающих автоматически выбираются с помощью AngularJS, когда второй DD зависит от первого

Question

У меня есть данные в таблице, в которых есть список городов. Когда я нажимаю на обновление в той же форме, данные заполняются в поля. Я хочу, чтобы и мой выпадающий список, Страна и Государство были автоматически выбраны из базы данных набаза города.Моя страна заполняется, а государство не заполняется в зависимости от страны.Я хочу сделать это с помощью AngularJS.Я использовал ng-repeat для заполнения раскрывающегося списка и ng-selected для выбора данных.Я использую версию AngularJS: 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

Если я правильно понял вашу проблему, думаю, это вам поможет

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>

Контроллер

Вы должны создать массив, который содержит города штата. Эта функция каждый раз, когда state изменяется, обновляет данные о городе, выпадающем вниз.

$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;
}