ng-repeat repeating item on splice instead of showing last item
<p>I have the following <code>ng-repeat</code> that work fine.</p>

<pre><code>&lt;div ng-repeat="data in workflow.flow | orderBy:'+step_number'" ng-init="$stepIndex = workflow.flow.indexOf(data)"&gt;
    {{ workflow.flow[$stepIndex].step_number }}
&lt;/div&gt;
</code></pre>

<h2>$scope.workflow.flow</h2>

<pre><code>[
  {
    "id":"1334f68db820f664",
    "step_number":1,
    "tasks":[ { "id":"1334f68e3f20f665" } ]
  },
  {
    "id":"134967a5ba205f5b",
    "step_number":2,
    "tasks":[ { "id":"134972c5b420e027" } ]
  },
  {
    "id":"1334f68e7d209ae6",
    "step_number":3,
    "tasks":[ { "id":"1334f68ef6209ae7" } ]
  }
]
</code></pre>

<p>This is how it displays in my html:</p>

<pre><code>1 
2
3
</code></pre>

<hr>

<p>I have the below function that adds a step into the middle of an array:</p>

<pre><code>$scope.insertStep = function() {

    var insertStepIndex = 1, 
        task_data = {"id": null, "step_number": (insertStepIndex+2), "tasks": []};

    //go through each item in the array
    $.each($scope.workflow.flow, function(index, step){
        //if the step number is greater then the place you want to insert it into, increase the step numbers
        if(step.step_number &gt; $scope.workflow.flow[insertStepIndex].step_number) step.step_number++;
    });

    $scope.workflow.flow.splice((insertStepIndex+1), 0, task_data);

}
</code></pre>

<p>For some reason, the array with id <strong>1334f68e7d209ae6</strong> get's changed to <code>step_number: 4</code> but get's completely ignored in the <code>ng-repeat</code></p>

<p>This is what is displayed:</p>

<pre><code>1
2
3
3
</code></pre>

<p>And when I console.log <code>$scope.workflow.flow</code> this is what I see:</p>

<pre><code>[
  {
    "id":"1334f68db820f664",
    "step_number":1,
    "tasks":[ { "id":"1334f68e3f20f665" } ]
  },
  {
    "id":"134967a5ba205f5b",
    "step_number":2,
    "tasks":[ { "id":"134972c5b420e027" } ]
  },
  {
    "id":null,
    "step_number":3,
    "tasks":[]
  },
  {
    "id":"1334f68e7d209ae6",
    "step_number":4,
    "tasks":[ { "id":"1334f68ef6209ae7" } ]
  }
]
</code></pre>

<p>Does anyone know why this would happen?</p>

<hr>

<h2>Below is a code snippet:</h2>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.workflow = {
      flow: [
      {
        "id":"1334f68db820f664",
        "step_number":1,
        "tasks":[ { "id":"1334f68e3f20f665" } ]
      },
      {
        "id":"134967a5ba205f5b",
        "step_number":2,
        "tasks":[ { "id":"134972c5b420e027" } ]
      },
      {
        "id":"1334f68e7d209ae6",
        "step_number":3,
        "tasks":[ { "id":"1334f68ef6209ae7" } ]
      }
    ]
    };

    $scope.insertStep = function() {

      var insertStepIndex = 1, 
          task_data = {"id": null, "step_number": (insertStepIndex+2), "tasks": []};

      //go through each item in the array
      $.each($scope.workflow.flow, function(index, step){
          //if the step number is greater then the place you want to insert it into, increase the step numbers
          if(step.step_number &gt; $scope.workflow.flow[insertStepIndex].step_number) step.step_number++;
      });

      $scope.workflow.flow.splice((insertStepIndex+1), 0, task_data);
      
      console.log($scope.workflow.flow);
  }


  });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>  

&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;      
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"&gt;&lt;/script&gt;
    &lt;div ng-app="app" ng-controller="ctrl"&gt;

      &lt;div ng-click="insertStep()"&gt;Insert Step&lt;/div&gt;&lt;br /&gt;&lt;br /&gt;

      &lt;div ng-repeat="data in workflow.flow | orderBy:'+step_number'" ng-init="$stepIndex = workflow.flow.indexOf(data)"&gt;
        {{ workflow.flow[$stepIndex].step_number }}
    &lt;/div&gt;
    &lt;/div&gt;</code></pre>
</div>
</div>
</p>