CODEWITHSUNDEEP
javascriptangularjs
Yarin
Yarin

Reputation: 183919

Angular model doesn't update when changing input programmatically

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';

Upvotes: 6

Views: 5610

Answers (1)

Rahul Arora
Rahul Arora

Reputation: 4543

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;

Upvotes: 8

Related Questions