title: Angular2 ngModel against ngFor variables
body: <p>Is it not possible (or not yet possible) to use <code>ngModel</code> against values from <code>ngFor</code>?  Is Angular trying to protect me from bad performance?</p>
  
  <p>Works great: <a href="http://jsfiddle.net/langdonx/n5pjgev6/">http://jsfiddle.net/langdonx/n5pjgev6/</a></p>
  
  <pre><code>&lt;input type="text" [(ng-model)]="value"&gt;{{value}}
  </code></pre>
  
  <p>Does not work so great: <a href="http://jsfiddle.net/langdonx/n5pjgev6/1">http://jsfiddle.net/langdonx/n5pjgev6/1</a></p>
  
  <pre><code>&lt;li *ng-for="#name of names"&gt;
      &lt;input type="text" [(ng-model)]="name"&gt;{{name}}
  &lt;/li&gt;
  </code></pre>
  
  <blockquote>
    <p>EXCEPTION: Cannot reassign a variable binding name</p>
  </blockquote>
  
  <p>I tried binding to the array as well, which... kind of works, but hijacks focus and also throws an exception: <a href="http://jsfiddle.net/langdonx/n5pjgev6/2/">http://jsfiddle.net/langdonx/n5pjgev6/2/</a></p>
  
  <pre><code>&lt;li *ng-for="#name of names; #i = index"&gt;
      &lt;input type="text" [(ng-model)]="names[i]"&gt;{{name}}
  &lt;/li&gt;
  </code></pre>
  
  <blockquote>
    <p>EXCEPTION: LifeCycle.tick is called recursively</p>
  </blockquote>
  
  <p><strong>Edit:</strong></p>
  
  <p>I can get around the <code>LifeCycle.tick</code> issue using a more direct approach, but the focus is still stolen because <code>ngFor</code> redraws things: <a href="http://jsfiddle.net/langdonx/n5pjgev6/3/">http://jsfiddle.net/langdonx/n5pjgev6/3/</a></p>
  
  <pre><code>&lt;li *ng-for="#name of names; #i = index"&gt;
      &lt;input type="text" [value]="names[i]" (input)="names[i] = $event.target.value"&gt;{{names[i]}}
  &lt;/li&gt;
  </code></pre>