Modelo ng de ligação dentro do loop de repetição de ng em AngularJS

Estou tentando lidar com o problema de escopo dentro de um loop ng-repeat - já pesquisei algumas perguntas, mas não consegui fazer meu código funcionar.

Código do controlador:

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

Visão:

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

Aqui está um violino: http://jsfiddle.net/cyberwombat/zqTah/

Basicamente, tenho um objeto (é um gerador de flyer) que contém várias linhas de texto. Cada linha de texto pode ser ajustada pelo usuário (texto, fonte, tamanho, cor, etc) e quero criar uma visualização para ela. O exemplo acima mostra apenas o campo de entrada para inserir texto e eu gostaria que atualizasse automaticamente / conforme você digitasse a div de visualização, mas haverá muitos mais controles.

Também não tenho certeza se obtive o código correto para o índice de loop - essa é a melhor maneira de criar um nome de modelo ng dentro do loop?

Para cada iteração do loop de repetição de ng, lineé uma referência a um objeto em seu array. Portanto, para visualizar o valor, use {{line.text}}.

Da mesma forma, para vincular ao texto, vincular ao mesmo: ng-model="line.text". Você não precisa usar valueao usar o ng-model (na verdade, você não deve).

Fiddle .

Para uma análise mais aprofundada dos escopos e da repetição de ng, consulte Quais são as nuances da herança prototípica / prototípica do escopo no AngularJS? , seção 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>