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.

Controller code:

function Ctrl($scope) {

  $scope.lines = [{text: 'res1'}, {text:'res2'}];

}

View:

<div ng-app>

     <div ng-controller=Ctrl>

       <div ng-repeat=line in lines>

           <div class=preview>{{text}}{{$index}}</div>



       </div>

       <div ng-repeat=line in lines>

           <-- typing here should auto update it's preview above -->

           <input value={{line.text}} ng-model=text{{$index}}/>

            <!-- many other fields here that will also affect the preview -->

       </div>

     </div>

    </div>

Here's a fiddle: http://jsfiddle.net/cyberwombat/zqTah/

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.

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?