AngularJS Select OnChange result not reflected in attached model

Question

I have the following markup inside my directive:

<select class="form-control" 
ng-change="changeLanguage()" 
ng-model="selectedLanguage" 
ng-options='lang.key as lang.name for lang in languages'></select>
<p>{{selectedLanguage}}</p>

And my directive's controllers relevant part is this:

$scope.languages = [{
    name: "Java",
    key: "java",
}, {
    name: "C",
    key: "c",
}];

$scope.$watch("selectedLanguage", function(newValue, oldValue) {
    console.log("watch", newValue, oldValue);
});

$scope.changeLanguage = function() {
    console.log("language changed: " + $scope.selectedLanguage)
}

However, when I change it via UI, it is not reflected in the controller, but it is available in the UI, I see the selected value. I tried both $watch and onChange to see, but both of them don't work. What is wrong here?

Try to initialize selectedLanguage in your controller as $scope.selectedLanguage=""; — Janaki Sathiyamurthy
– Janaki Sathiyamurthy, Commented Jan 22, 2015 at 12:37
Code is perfect. Works perfectly for me. Share a plunkr or jsFiddle if possible. — Janaki Sathiyamurthy
– Janaki Sathiyamurthy, Commented Jan 22, 2015 at 12:41

Davin Tryon · Accepted Answer · 2015-01-22 12:32:29Z

2

Seems to work fine for me. Here is an example of it working with the code you provided.

var app = angular.module('myApp', []);

app.controller('Ctrl', function($scope) {

  $scope.languages = [{
    name: "Java",
    key: "java",
  }, {
    name: "C",
    key: "c",
  }];

  $scope.$watch("selectedLanguage", function(newValue, oldValue) {
    console.log("watch", newValue, oldValue);
  });

  $scope.changeLanguage = function() {
    console.log("language changed: " + $scope.selectedLanguage)
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">
  <select class="form-control" ng-change="changeLanguage()" ng-model="selectedLanguage" ng-options='lang.key as lang.name for lang in languages'></select>
  <p>{{selectedLanguage}}</p>
</div>

answered Jan 22, 2015 at 12:32

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

szapio · Accepted Answer · 2015-01-22 12:33:00Z

1

Weird, maybe problem is not there? In pluncker it works

   (function() {

    var app = angular.module('myApp', []);

        app.controller('myCtrl', ['$scope',
        function($scope) {
          $scope.languages = [{
            name: "Java",
            key: "java",
          }, {
            name: "C",
            key: "c",
          }];

          $scope.$watch("selectedLanguage", function(newValue, oldValue) {
            console.log("watch", newValue, oldValue);
          });

          $scope.changeLanguage = function() {
            console.log("language changed: " + $scope.selectedLanguage)
          }
        }
      ]);
        })()

plunker

answered Jan 22, 2015 at 12:33

szapio

1,0081 gold badge9 silver badges15 bronze badges

Collectives™ on Stack Overflow

AngularJS Select OnChange result not reflected in attached model

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related