AngularJS предварительно выбрать опцию с данными, полученными с сервера

Question

Я создал CRUD с AngularJS, в части обновления, когда дело доходит до выбора, я не могу получить предварительно выбранное значение. Текстовые поля показывают правильные данные, и я могу обновить все поля без ошибок. Пожалуйста, поймите, я новичок. Код, вставленный ниже, является частями, которые больше ничего не важны И заранее спасибо.

HTML

<div ng-init="readLangs()" class="md-block">
    <select 
        ng-model="lang_id" 
        ng-options="lang.lang_name for lang in langs">
    </select>
</div>

JS

$scope.showUpdateChnForm = function(chn_id){

// get chn to be edited
chnsFactory.readOneChn(chn_id).then(function successCallback(response){

    // put the values in form
    $scope.chn_id = response.data.chn_id;
    $scope.chn_name = response.data.chn_name;
    $scope.chn_price = response.data.chn_price;
    $scope.lang_id = response.data.lang_id;
    }
}

readOneChn выведет lang_id и lang_name

{
"chn_id":"2",
"chn_name":"BBC World News",
"chn_price":"1.00",
"lang_id":"1",
"lang_name":"English"
}

Опции выбора получены с сервера JS

$scope.readLangs = function(){
// use chns factory
chnsFactory.readLangs().then(function successCallback(response){
    $scope.langs = response.data.records;
}, function errorCallback(response){
    $scope.showToast("Unable to read record.");
});
}

Answer 1

Благодаря @ Anurag Я решил проблему. Я изменил ng-model, как вы сказали, на lang, но фильтр не нужен. Там должно быть track by. Я помню из другого решения с просьбой использовать track by, но он никогда не работал для меня. Благодаря @ решению Анурага я научился делать это $scope.lang = {lang_id: response.data.lang_id} и теперь, если я добавил track by lang.lang_id, и оно работает.

HTML

<div ng-init="readLangs()" class="md-block">
    <select ng-model="lang"
            ng-options="lang.lang_name for lang in langs track by lang.lang_id">    
    </select>
</div>

JS

$scope.showUpdateChnForm = function(chn_id){
    // get chn to be edited
    chnsFactory.readOneChn(chn_id).then(function successCallback(response){
        // put the values in form

        $scope.chn_id = response.data.chn_id;
        $scope.chn_name = response.data.chn_name;
        $scope.chn_price = response.data.chn_price;
        $scope.lang = {lang_id: response.data.lang_id};
    }
}

Answer 2

Вы должны использовать в своем HTML:

<div ng-init="readLangs()" class="md-block">
    <select 
        ng-model="lang" 
        ng-options="lang.lang_name for lang in langs">
    </select>
</div>

А в JS:

$scope.showUpdateChnForm = function(chn_id){    
    chnsFactory.readOneChn(chn_id).then(function successCallback(response){

        // put the values in form
        $scope.chn_id = response.data.chn_id;
        $scope.chn_name = response.data.chn_name;
        $scope.chn_price = response.data.chn_price;

        // Update $scope.lang
        $scope.lang = $filter('filter')($scope.langs, {lang_id: response.data.lang_id})[0];
    }
}

Тогда вы можете использовать $scope.lang.lang_id как пожелаете.