在angularjs的ng-repeat之外，作用域不起作用

Question

HTML

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

Controller

$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

Answer 1

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>

Demo: http://codepen.io/anon/pen/adBKVd?editors=101