angular js input bind value

Question

I have an input like this :

<input ng-model="mysearch.myfield" id="myid"/>

that is bound to a filter

<table><tr ng-repeat="row in list|filter:mysearch">...</tr></table>

If I modify the input value in the GUI, it works perfectly, but if I try to modify its value via javascript/jquery

$("#myid").val("newvalue")

The input value is updated but the mysearch.myfield is not modified

Actually, I have a list that appears on user actions (it does not exist on page load):

<li onclick="changeTheInputValue('newvalue1')">newvalue1</li>
<li onclick="changeTheInputValue('newvalue2')">newvalue2</li>
...

with

function changeTheInputValue(v) {
  $("#myid").val(v);
}

And it does not work when I click on an "li" (the input value is updated, ut the mysearch.myfield is not modified)

I also tried

<li ng-click="mysearch.myfield = 'newvalue1'">newvalue1</li>
<li ng-click="mysearch.myfield = 'newvalue2'">newvalue2</li>
...

but it does not work :( Any idea ?

Thanks,

Answer 1

any javascript executing outside the angulars event loop won't be efective in angular untill you apply it. in order to do that you need to get the relevant scope and $apply the changes, since is not clear, how and why you are modifying the value outside the angular scope there is nothing much i can say except you could do something like

function changeTheInputValue(v) {
     $("#myid").val(v);
     angular.element($("#myid")).scope().$apply();
}

that should let angular know about the changes, how ever this is a bad design if using angular. there are far better ways to accomplish this same thing w/o having mixed execution scopes. (angular/the rest);

Answer 2

You are modifying the value of the input "#myid" using direct DOM manipulation. AngularJS is not aware of this. If you want both the html and the value of mysearch.myfield to update correctly, you must do so by modifying the mysearch.myfield property directly, either in a controller or via an ng-model binding or something similar.

The main reason this isn't working for you has to do with how AngularJS modifies the DOM. When you use jQuery to modify the DOM, you are circumventing angular. Angular has no way of knowing if you have changed something in the DOM except if you do it directly through Angular itself. In particular, if you are curious, read about the $compile and $digest services.

Hope this helps shed some light on the subject!