title: ng-repeat to index into array
body: <p>I have an angularjs app that streams data via ajax, and I would like to ng-repeat over the data.  I have the data streaming and displaying but now I want to templatize the objects.  The issue I am running into is that I am using ng-repeat simply to index into an array in the controller.  I now need to have a </p>
  
  <pre><code>    &lt;div class="row" data-ng-repeat="row in rows"&gt;
          &lt;div class="span3" data-ng-repeat="col in cols"&gt;
              //displays the raw json fine
              {{ data[$parent.$index * numColumns + $index] }}                           
              // also displays the raw json
              {{ item = data[$parent.$index * numColumns + $index] }}                           
              &lt;div&gt;Id: {{item.Id}} &lt;/div&gt;
              &lt;div&gt;Title: {{ item.ClientJobTitle }}&lt;/div&gt;
              ...
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I could always repeat the array index expression for each property, but there will be a couple dozen properties, so the code will be ugly and all the repeated calculations will slow things down.</p>
  
  <p>What is the right (angular) way to do this?</p>
  
  <p><strong>Update</strong>
  I need it to be responsive too, I will be adjusting the number of columns on the fly based on window width.</p>
  
  <p><strong>Update</strong>
  I guess what I really want is something like the following non-working example</p>
  
  <pre><code>     &lt;div class="row" data-ng-repeat="row in rows"&gt;
          &lt;div class="span3" data-ng-repeat="col in cols"&gt;
              &lt;div ng-model="data[$parent.$index * numColumns + $index]"&gt;
                  &lt;!-- Here $model would refer to the ng-model above --&gt;
                  &lt;div&gt;Id: {{$model.Id}} &lt;/div&gt;
                  &lt;div&gt;Title: {{ $model.Title }}&lt;/div&gt;
                  ...
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>