Angular.js: ng-model does not update when sending a value to an input field

Created on 19 Aug 2015 · 3Comments · Source: angular/angular.js

example: i have 3 input fields. The values from the first and second input field get's calculated and the result is shown in the third inputbox.

var1 = parseFloat($("#input1").val();
var2 = parseFloat($("#input2").val();
result = var1 + var2;

$("#input3").val(result);

<input type="number" id="input3" name="input3" ng-model="editForm.input3" ng-currency class="form-control input-sm" placeholder="input3">

i can see the result on the form in input3, but how can i get the model updated?

Source

jetta20162

Most helpful comment

try this-

$("#input3")
  .val(result)
  .trigger('change')

generally, you want to update the model your input is bound to (and let angular propagate it to the view) instead of updating your view directly. the latter is typically only used in unit tests.

bcherny on 19 Aug 2015

🎉3

All 3 comments

try this-

$("#input3")
  .val(result)
  .trigger('change')

generally, you want to update the model your input is bound to (and let angular propagate it to the view) instead of updating your view directly. the latter is typically only used in unit tests.

bcherny on 19 Aug 2015

🎉3

Actually, this doesn't feel like Angular code. In Angular, it is the other way around: You update the model and the change is reflected in the view. (The model is the single source of truth.)

So, instead of trying to set the value and expect the model to be updated, you should update the model (editForm.input3) and the element's value would be updated as a result.

That said, this is a general support question and should be directed to the appropriate channels.
GitHub issues are reserved for bug reports and feature requests.