title: Dynamically change child element order in Angular ng-repeat
body: <p><strong>Background</strong></p>
  
  <p>I have an angular table directive where the user can customise the column order (via drag and drop). Data rows use the <code>ng-repeat</code> directive.</p>
  
  <pre><code>&lt;table columno&gt;
      &lt;tr&gt;
          &lt;th&gt;Column Head 1&lt;/th&gt;
          &lt;th&gt;Column Head 2&lt;/th&gt;
          &lt;th&gt;Column Head 3&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr ng-repeat="item in items"&gt;
          &lt;td&gt;Column 1&lt;/td&gt;
          &lt;td&gt;Column 2&lt;/td&gt;
          &lt;td&gt;Column 3&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Simplified fiddle using buttons instead of drag and drop @ <a href="https://jsfiddle.net/jn1y44s6/5/" rel="nofollow">https://jsfiddle.net/jn1y44s6/5/</a>.</p>
  
  <p><strong>Problem:</strong></p>
  
  <p>When the user moves say Column 1 to become Column 2, the move works fine. Problem is when a new object is added to the <code>items</code> array the new columns are in the original unchanged order.</p>
  
  <p>I understand <code>ng-repeat</code> is using the compiled template as constructed at runtime but how can I make the new column order persist for new objects too? </p>