title: Binding ng-model inside ng-repeat loop in AngularJS
body: <p>I'm trying to deal with the issue of scope inside of an ng-repeat loop - I've browsed quite a few questions but have not quite been able to get my code to work. </p>
  
  <p>Controller code:</p>
  
  <pre><code>function Ctrl($scope) {
    $scope.lines = [{text: 'res1'}, {text:'res2'}];
  }
  </code></pre>
  
  <p>View:</p>
  
  <pre><code>&lt;div ng-app&gt;
       &lt;div ng-controller="Ctrl"&gt;
         &lt;div ng-repeat="line in lines"&gt;
             &lt;div class="preview"&gt;{{text}}{{$index}}&lt;/div&gt;
  
         &lt;/div&gt;
         &lt;div ng-repeat="line in lines"&gt;
             &lt;-- typing here should auto update it's preview above --&gt;
             &lt;input value="{{line.text}}" ng-model="text{{$index}}"/&gt;
              &lt;!-- many other fields here that will also affect the preview --&gt;
         &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here's a fiddle: <a href="http://jsfiddle.net/cyberwombat/zqTah/">http://jsfiddle.net/cyberwombat/zqTah/</a></p>
  
  <p>Basically I have an object (it's a flyer generator) which contains multiple lines of text. Each line of text can be tweaked by the user (text, font, size, color, etc) and I want to create a preview for it. The example above only shows the input field to enter text and I would like that to automatically/as-you-type update the preview div but there will be many more controls. </p>
  
  <p>I am also not sure I got the code right for the looping index - is that the best way to create a ng-model name inside the loop?</p>