title: Handling duplicate elements in an ng-repeat
body: <p>I am building an app which features a kind of "playlist". This is represented an ng-repeated custom directive with <code>ng-repeat = "element in playlist"</code></p>
  
  <p>Because I want to allow a user to re-use the same element twice in the playlist, I tried using the <code>track by $index</code> addition.</p>
  
  <p>Now, what's confusing is: when I came to remove an element from the playlist (I have a function <code>removeElement(index)</code> which essentially contains something like this:</p>
  
  <pre><code>$scope.removeElement = function(index){
    $scope.playlist.splice(index, 1);
  }
  </code></pre>
  
  <p>Something weird happened: the element was removed correctly from <code>$scope.playlist</code>, but for some reason the view didn't update properly. The last element appeared to be removed.</p>
  
  <p>Furthermore, I couldn't properly re-order the elements in the array either.</p>
  
  <p>When I removed <code>track by $index</code> this problem disappears, so I assume this is because when you remove an item from the array, if you're only looking at the indices, then it appears you've just deleted the last one.</p>
  
  <p>The behaviour is odd though, because transcluded content is correctly removed -- <strong><a href="http://plnkr.co/edit/4znEquMeQvIUZAmPjWdL?p=preview">see this plunker</a></strong></p>
  
  <p><strong>EDIT:</strong> The above link has been modified to show the problem better and also show the answer I settled on.</p>
  
  <p>The question has also been slightly edited, to make it clearer what I was getting at. KayakDave's answer below is still correct, but is more suited to an array of primitives (which my original plunker featured).</p>
  
  <p><strong>TL;DR:</strong> How do you put duplicate elements in an <code>ng-repeat</code> without sacrificing the ability to control their position, or remove elements correctly?</p>