title: Splice removing wrong object of ng-repeat in AngularJS
body: <p>I want to use <code>$scope.posts.splice(post, 1);</code> to remove an object (post) of an ng-repeat. </p>
  
  <p>When I click on the delete button, the wrong post gets deleted (always the first one). When I refresh the browser, the right post was deleted (api delete function works).</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div ng-repeat="post in posts | orderBy: '-upvotes'"&gt;
    &lt;md-button class="md-icon-button md-accent" aria-label="Vote-Up" ng-click="incrementUpvotes(post)"&gt;
      &lt;i class="material-icons"&gt;thumb_up&lt;/i&gt;
    &lt;/md-button&gt;
    {{post.upvotes}}
    &lt;span style="font-size:20px; margin-left:10px;"&gt;
      &lt;a ng-show="post.link" href="{{post.link}}"&gt;
        {{post.title}}
      &lt;/a&gt;
      &lt;span ng-hide="post.link"&gt;
        {{post.title}}
      &lt;/span&gt;
    &lt;/span&gt;
    &lt;span&gt;
      posted by &lt;a ng-href="#/users/{{post.user.username}}"&gt;{{post.user.username}}&lt;/a&gt;
    &lt;span&gt;
      &lt;a href="#/posts/{{post.id}}"&gt;Comments&lt;/a&gt;
      &lt;a href="#" ng-click="deletePost(post)"&gt;Delete&lt;/a&gt;
    &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>angular.module('crud')
  .controller('MainCtrl', [
  '$scope',
  'posts',
  'ToastService',
  
  function($scope, posts, ToastService){
  
    $scope.posts = posts.posts;
  
    // Delete Post
    $scope.deletePost = function(post){
      if(window.confirm('Are you sure?')) {
        posts.delete(post).then(function () {
          $scope.posts.splice(post, 1);
          ToastService.show('Post deleted');
        });
      }
    };
  </code></pre>
  
  <p>Why does splice remove the wrong post of ng-repeat?</p>