In angularjs, why does the value of ng-model remain the same in a select?

Question

I have a simple form where a user can select a language and press Save. The initial value of the <select> is the users language on the web page.

I have the following JS code in my controller:

$scope.usersLanguage = loadUsersLanguage(); // e.g. "en"
$scope.allLanguages = loadAllLanguages(); // array of all languages
$scope.interviewLanguage = $scope.usersLanguage; // preselecting the drodown

$scope.logThis() = function() {
    console.log($scope.interviewLanguage); // Always prints "en"
}

and the following HTML

<select
    ng-model="interviewLanguage"
    ng-change="logThis()"
    ng-options="language.Id as language.Name for language in allLanguages"
></select>

The ng-change is just for logging purposes.

My problem is that regardless of what I change the language dropdown to, it always prints the initial value. Never changes. And I've double checked the array allLanguages, they all have unique ids and names.

Any ideas? Previous similiar StackOverflow-questions were no help.

code you posted works http://plnkr.co/edit/FdYfpCJtID1DAEPDu4xX?p=preview — Petr Averyanov, Sep 21 '18 at 11:04
Weird. Then something in the rest of my code messes it up. Have no idea why. — Weblurk, Sep 21 '18 at 11:13

score 0 · Answer 1 · answered Sep 21 '18 at 11:35

0

It could also be a reference problem. Try using $scope.interviewLanguage = angular.copy($scope.usersLanguage);

answered Sep 21 '18 at 11:35

Louis JACQUES

26
7

score 0 · Accepted Answer · answered Sep 21 '18 at 11:47

Ok I found what was wrong. What's not shown in my HTML above is that my entire HTML is wrapped around a <div ng-if="condition">.

Then in certain states, the DOM would be removed and bindings broke.

Changing ng-if to ng-show solved the problem since the latter only hides/shows the DOM, instead of destroying it.

In angularjs, why does the value of ng-model remain the same in a select?

2 Answers2