title: Angularjs table sort with ng-repeat
body: <p>I have an HTML table and want to sort my records (<code>$scope.records</code> in ctrl) by clicking on table headers (<code>$scope.headers</code> in ctrl),</p>
  
  <p>Can anyone explain why does that work:</p>
  
  <pre><code>&lt;th&gt;
      &lt;a ng-click="sortColumn=headers[0];reverse=!reverse"&gt;{{ headers[0] }}&lt;/a&gt;
  &lt;/th&gt;
  &lt;th&gt;
      &lt;a ng-click="sortColumn=headers[1];reverse=!reverse"&gt;{{ headers[1] }}&lt;/a&gt;
  &lt;/th&gt;
  </code></pre>
  
  <p>And that doesn't:</p>
  
  <pre><code>&lt;th ng-repeat="header in headers"&gt;
      &lt;a ng-click="sortColumn=headers[$index];reverse=!reverse"&gt;{{ headers[$index] }}&lt;/a&gt;
  &lt;/th&gt;
  </code></pre>
  
  <p>Here is the code for the records:</p>
  
  <pre><code>&lt;tr ng-repeat="arr in records | orderBy:sortColumn:reverse"&gt;
      &lt;td ng-repeat="val in arr" ng-bind-html-unsafe="arr[headers[$index]]&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I have 58 columns in my table so would be much better to loop through the table headers...</p>