<ul>
<li ng-repeat="obj in strA">
obj.str = {{obj}}
<input ng-model="obj" />
</li>
</ul>
obj in <code>{{ strA.a1 }}</code>
obj in <code>{{ strA.a2 }}</code>
$scope.strA = {
a1: "abc",
a2: "bcd"
};
When I change the value in text box, obj inside ng-repeat changes. but value wrapped by don't change
Here is the codepen : http://codepen.io/anon/pen/vLyrxm
Why is it so? as per my knowledge, both the value should be change
ngRepeat creates new child scope. It means that in each repeated li there is a new scope and with ngMOdel you are binding to this local scope. You could do something like this instead:
<li ng-repeat="(key, value) in strA">
obj.str = {{value}}
<input ng-model="strA[key]" />
</li>
$scope) is different inside of each li. you think you change obj inside of the loop, but you actually modifying new local (child) scope property, which shadows outer scope obj. So what I did is provided a direct reference to the outer scope obj. This is related to how prototypical object inheritance works in JS. I recommend to get familiar with this topic, this is very important.