Angularjs updates the view but not the model

Question

Angularjs updates the view but not the model

1k Views Asked by Daniel At 06 April 2025 at 15:13

please pay attention this is the opposite of 99% of the related questions on stackoverflow.

Mi problem is: I have a dependent select, when the 'Master' select changes, the 'Slave' view gets updated but NOT it's model. WEIRD.

Example code:

<!DOCTYPE html>
<html ng-app>

<head>
  <script src="https://code.angularjs.org/1.3.5/angular.js"></script>
</head>

<body>
  <select ng-model='master'>
    <option value='m1'>Master 1</option>
    <option value='m2'>Master 2</option>
  </select>
  <select ng-model='slave'>
    <option value='Slave 1 selected' ng-selected='master == "m1"'>Slave 1</option>
    <option value='Slave 2 selected' ng-selected='master == "m2"'>Slave 2</option>
  </select>
  {{ slave }}
</body>

</html>

When changing the Master select, you can see the select changing but not the printed value for the binding {{ slave }}.

Link to plunker: http://plnkr.co/edit/LjaKgTTfBlczkGuCIhZ1

Original Q&A

There are 3 best solutions below

Shomz On 09 December 2014 at 20:06

The Angular approach to this would be to change the slave model directly, not just the DOM (ng-selected basically just sets the selected attribute if it evaluates to true, nothing else). Technically, you can hack this by adding a watcher that will also update the model, but rewriting it sounds like a much better idea.

Here's an example, it's a bit sloppy, but replace was the quickest thing I could do without actually writing some JS (but you get the idea):

  <select ng-model='master' ng-change="slave = master.replace('m', 's')">
    <option value='m1'>Master 1</option>
    <option value='m2'>Master 2</option>
  </select>
  <select ng-model='slave'>
    <option value='s1' >Slave 1</option>
    <option value='s2' >Slave 2</option>
  </select>

http://plnkr.co/edit/WT7vb7yvtcvaUPUwGXdI?p=preview

New Dev On 09 December 2014 at 20:17

@Shomz's answer is one way to go, although the replace seems a bit like a hack.

The reason that slave is not updated is because Angular is careful about changing the ViewModel without developer's knowledge. Typically, the ViewModel should be changed either by the controller in response to an external event or by the View - in response to user action. In this case, the change would have been in response to selected property being changed on the slave seleced, so Angular doesn't change slave.

Another way to think about it is: How would slave be updated in response to a change in master if you didn't have the View (i.e. <select>), such as the case with unit-testing the controller.

The proper way to implement this is, in fact, via a $watcher - so I disagree on this point with @Shomz.

I would also suggest to evaluate why you need both master and slave to be shadowing each other. If this is the case, you should then use the same ng-model:

<select ng-model="master2" 
       ng-options="val.k as val.v for val in [{k: 'm1', v: 'Master1'}, {k: 'm2', v: 'Master2'}]">
</select>
<select ng-model="master2" 
       ng-options="val.k as val.v for val in [{k: 'm1', v: 'Slave 1'}, {k: 'm2', v: 'Slave 2'}]">
</select>

**Jason Goemaat** · Accepted Answer

Angular updates the view based on model changes and the model based on user interactions with the view. By changing the selected option manually using ng-selected, angular has not seen the user select a new option and therefore does not update slave. And since slave has not changed since it last set the selected option on the control it will not update the selected option. I don't think you should use ng-model and ng-selected together. I think this makes total sense and is not a bug in angular, ng-selected just isn't meant to be used that way. Think about this code:

$scope.buttonClicked = function () {
  $scope.slave = "Slave 1 selected";
  $scope.master = "m2";
};

What should the value of slave be and which option should be selected? You have set both options in code, what should angular do to the html select? Should it ignore your setting of the 'slave' value? Should it ignore the ng-selected attribute that says it should select slave 2 if master is m2? Let's say you set master to m1, this causes ng-selected to make the selected option slave 1. What if the user then changes the option to slave 2? The ng-selected option is then incorrect.

If you want to do a one-time setting of the slave value when the master is changed, you should create a watch to run code when the value changes:

$scope.$watch('master', function(newValue, oldValue) {
  if (newValue == 'm1') {
    $scope.slave = 'Slave 1 selected';
  } else if (newValue == 'm2') {
    $scope.slave = 'Slave 2 selected';
  } else {
    $scope.slave = undefined;
  }
});

Angularjs updates the view but not the model

There are 3 best solutions below

Related Questions in ANGULARJS

Related Questions in HTML-SELECT

Related Questions in ANGULARJS-MODEL

Related Questions in ANGULARJS-WATCH

Trending Questions

Popular # Hahtags

Popular Questions