Difficulty with ng-model, ng-repeat, and inputs
angularjs, angularjs-ng-model, angularjs-ng-repeat
Solution
This seems to be a binding issue.
The advice is don't bind to primitives.
Your `ngRepeat` is iterating over strings inside a collection, when it should be iterating over objects. To fix your problem
<body ng-init="models = [{name:'Sam'},{name:'Harry'},{name:'Sally'}]">
<h1>Fun with Fields and ngModel</h1>
<p>names: {{models}}</p>
<h3>Binding to each element directly:</h3>
<div ng-repeat="model in models">
Value: {{model.name}}
<input ng-model="model.name">
</div>
jsfiddle: http://jsfiddle.net/jaimem/rnw3u/5/
Problem
I am trying to allow the user to edit a list of items by using `ngRepeat` and `ngModel`. (See this fiddle.) However, both approaches I've tried lead to bizarre behavior: one doesn't update the model, and the other blurs the form on each keydown. Am I doing something wrong here? Is this not a supported use case? Here is the code from the fiddle, copied for convenience: ``` <html ng-app> <head> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"> </head> <body ng-init="names = ['Sam', 'Harry', 'Sally']"> <h1>Fun with Fields and ngModel</h1> <p>names: {{names}}</p> <h3>Binding to each element directly:</h3> <div ng-repeat="name in names"> Value: {{name}} <input ng-model="name"> </div> <p class="muted">The binding does not appear to be working: the value in the model is not changed.</p> <h3>Indexing into the array:</h3> <div ng-repeat="name in names"> Value: {{names[$index]}} <input ng-model="names[$index]"> </div> <p class="muted">Type one character, and the input field loses focus. However, the binding appears to be working correctly.</p> </body> </html> ```