javascript - Angular.js: update binding after manual modification -

i'm starting dive angular.js , have found issue can't seem around. consider simple code:

<input type="text" ng-model="test"> <input type="text" value="{{test}}"> 

when write in first field, second 1 updated nicely. when write in second field , go first one, binding not updated anymore. interestingly though, html attribute value does updated - it's not displayed.

equivalent (at least roughly) code in vanilla javascript not suffer this:

<input type="text" id="model"> <input type="text" id="binding"> <script>     var model = document.getelementbyid("model");     var binding = document.getelementbyid("binding");     model.addeventlistener("keyup",function() {         binding.value = model.value;     }); </script> 

here's fiddle test both: http://jsfiddle.net/q6b5k/

any idea why happens when using angular.js , how fix this?

[edit] judging initial replies, appears have not made clear. not want second field update first one. binding one-way only, e.g. allow filtering or manual corrections (such automatic creation of url alias in blog post creation form). http://jsfiddle.net/q6b5k/1/

the value attribute used when rendering initial html. after page load, else happens in angular event loop , therefore need event loop can pick up. can use ng-change looking do:

<input type="text" ng-model="test" ng-change="test2=test.tolowercase();" /> <input type="text" ng-model="test2"">