Dynamically change child element order in Angular ng-repeat
<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>