Angular model doesn't update when changing input programmatically

Question

I have a text input bound to a model value, but I can't figure out how to change the input value programmatically and have the change propagate to the model.

I understand that because I'm updating the value external to the angular scope that I need to explicitly call $scope.$apply(), but it's not working.

HTML:

<input id="test_input" ng-model="test_value">

Controller:

$scope.test_value = 'abc'; // starting value

Console:

$('#test_input').val('xyz');
$('#test_input').scope().$apply();
$('#test_input').scope().test_value;
-> 'abc';

Why are you not changing the value of $scope.test_value directly using console and rather doing it using jquery? — Rahul Arora
– Rahul Arora, Commented Jun 12, 2016 at 18:59
@RahulArora - This is demo code. I have an app where the input element is being updated programmatically, and I want the model to register that. — Yarin
– Yarin, Commented Jun 12, 2016 at 19:05

Rahul Arora · Accepted Answer · 2016-06-12 19:50:54Z

8

ngModel listens for "input" event, so you need to trigger that event after setting the value:

$('#test_input').val('xyz');
$('#test_input').trigger('input'); 
$('#test_input').scope().test_value;

edited Jun 12, 2016 at 19:50

answered Jun 12, 2016 at 19:16

Rahul Arora

4,5431 gold badge19 silver badges25 bronze badges

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

3 Comments

Patrick Evans Over a year ago

Side note: You do not need the $apply() call when using trigger, and jQuery has to be included before Angular in order for it to work: jsfiddle.net/xj9rysy6

Sebastianb Over a year ago

What if I'm working in an 'input' event? wouldn't triggering the input again cause an infinite loop?

Rahul Arora Over a year ago

then you dont need to trigger it, you just need to call the scope() for angular to digest it

Collectives™ on Stack Overflow

Angular model doesn't update when changing input programmatically

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related