16

Here is my not working demo 

<section ng-repeat="t in test">
  <div ng-repeat="(key,value) in t">
    <div>{{key}}</div>
   <input type="text" ng-model="value"/>
  </div>
</section>

Model stays the same. How to sync? Please note, structure of data is important.

Medet Tleukabiluly
  • 11,662
  • 3
  • 34
  • 69

1 Answers1

31

The ng-model binding will evaluate its expression on the current scope. As ng-repeat creates a child scope, this means that ng-model will look for a property named value on the child scope. In your example we'd expect it to look for the val property on the parent scope, which is aliased to t.

This is by design and can be circumvented in your case by referencing the parent scope t in the expression.

Working demo

Code (notice the binding on the input element has changed):

<section ng-repeat="t in test">
  <div ng-repeat="(key,value) in t">
    <div>{{key}}</div>
   <input type="text" ng-model="t[key]"/>
  </div>
</section>

As you're using a beta version of Angular 1.3, this may be a bug.

thomaux
  • 19,133
  • 10
  • 76
  • 103
  • 4
    If there is no '.' in ng-model, then when the model is assigned on scope (i.e. text is entered in the input field), it will create a shadow variable in the child scope (ng-repeat creates the child scope) that is a copy of the variable in parent scope - breaking two-way binding. This is by design - but can be the source of a lot of confusion. array notation (item[]) is the exception. – Michael Kang Jul 16 '14 at 07:27
  • so what if ng-model is not the value `t[key]` but the key itself? What would be the syntax to reference the key as the model value? – ahnbizcad May 14 '18 at 17:58
  • @ahnbizcad not tested, but I assume `ng-model="key"`. If this doesn't work, you may need to first create an array of keys using something like `Object.keys` – thomaux May 23 '18 at 12:19