Enlace ng-model dentro del bucle ng-repeat en AngularJS

Estoy tratando de resolver el problema del alcance dentro de un bucle ng-repeat: he examinado bastantes preguntas pero no he podido hacer que mi código funcione.

Código del controlador:

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

Ver:

<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>

Aquí hay un violín: http://jsfiddle.net/cyberwombat/zqTah/

Básicamente tengo un objeto (es un generador de folletos) que contiene varias líneas de texto. El usuario puede modificar cada línea de texto (texto, fuente, tamaño, color, etc.) y quiero crear una vista previa. El ejemplo anterior solo muestra el campo de entrada para ingresar texto y me gustaría que automáticamente / mientras escribe actualice el div de vista previa, pero habrá muchos más controles.

Tampoco estoy seguro de haber obtenido el código correcto para el índice de bucle: ¿es esa la mejor manera de crear un nombre de modelo ng dentro del bucle?

Para cada iteración del ciclo ng-repeat, linees una referencia a un objeto en su matriz. Por lo tanto, para obtener una vista previa del valor, utilice {{line.text}}.

Del mismo modo, a DataBind al texto, databind a la misma: ng-model="line.text". No necesita usar valuecuando usa ng-model (en realidad no debería).

Violín .

Para obtener una mirada más detallada a los alcances y ng-repeat, consulte ¿Cuáles son los matices de la herencia prototípica / prototípica del alcance en AngularJS? , sección ng-repeat .

<h4>Order List</h4>
<ul>
    <li ng-repeat="val in filter_option.order">
        <span>
            <input title="{{filter_option.order_name[$index]}}" type="radio" ng-model="filter_param.order_option" ng-value="'{{val}}'" />
            &nbsp;{{filter_option.order_name[$index]}}
        </span>
        <select title="" ng-model="filter_param[val]">
            <option value="asc">Asc</option>
            <option value="desc">Desc</option>
        </select>
    </li>
</ul>