Search code examples
angularjsangular-ngmodelangularjs-ng-change

Select option is not getting updated with change in ng-model

I have two select tags (say Select 1 & Select 2) with respective ng-model variables and calling separate methods on ng-change trigger. I'm trying to set "Select 1" option value from a method called by "Select 2" ng-change. I'm observing an issue with this setup. If the user selects a value from "Select 2" drop down, the value of "Select 1" option is updated properly. However if the user selects a value from "Select 1" and then when he tries to change the value of "Select 2" drop down, the "Select 1" value is not responding/changing.

Please help me understand this behavior and guidance to overcome this issue.

I've created a plnkr capturing this behavior. Please check https://plnkr.co/edit/tGN4ZxdHprnpx7aD7Pen?p=preview

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

app.controller('MainCtrl', function($scope, $rootScope) {
  $scope.a = 'b';
  $scope.features = ['a', 'b', 'c'];
  $scope.roles = ['a', 'c', 'b'];
  $scope.b = function() {
    alert("feature changing");
  };
  $scope.call = function(a){
    console.log("call called : " + a);
    $rootScope.selectedFeature = '';
    $rootScope.selectedFeature = a;
  }
  $rootScope.selectedFeature = 'a';
});

I've copied the app.js code here

Solution

  • Somehow the ng-model is resolving to local scope and not rootScope. I resolved the issue by using addressing it as rootScope variable in HTML. I have updated the plunkr https://plnkr.co/edit/tGN4ZxdHprnpx7aD7Pen?p=preview 

    <body ng-controller="MainCtrl">
    <div ng-if="selectedFeature">
      <span>Select 1: </span>
      <select ng-model="$root.selectedFeature" ng-options="feature for feature in features" ng-change="b()">
        </select>
    </div>
    <!--<input type="text" ng-model="a" ng-change="call(a)">-->
    <span>Select 2: </span>
    <select ng-model="$root.selectedRole" ng-options="role for role in roles" ng-change="call($root.selectedRole)">
    </select>
  </body>