ng-repeat outputting unusual results

Question

I have the following code:

<div ng-repeat="data in workflow.flow | orderBy:'+step_number'">
    index: {{$index}}  - 
    step: {{ data.step_number }} - 
    arrayStep: {{ workflow.flow[$index].step_number }}
</div>

What I get back is the following, which makes NO SENSE:

index: 0 - step: 1 - arrayStep: 1
index: 1 - step: 2 - arrayStep: 2
index: 2 - step: 3 - arrayStep: 4
index: 3 - step: 4 - arrayStep: 5
index: 4 - step: 5 - arrayStep: 3

In theory, step and arrayStep should be exactly the same but I have no idea why it isn't so.

Does anyone know why this would be happening?

---

$scope.workflow.flow

[
  {
    "id":"1334f68db820f664",
    "step_number":1,
    "tasks":[ { "id":"1334f68e3f20f665" } ]
  },
  {
    "id":"1349735b4720857a",
    "step_number":2,
    "tasks":[]
  },
  {
    "id":"134967a5ba205f5b",
    "step_number":4,
    "tasks":[ { "id":"134972c5b420e027" } ]
  },
  {
    "id":"1334f68e7d209ae6",
    "step_number":5,
    "tasks":[ { "id":"1334f68ef6209ae7" } ]
  },
  {
    "id":"13496c4b2a208575",
    "step_number":3,
    "tasks":[]
  }
]

Answer 1

Your are right @Lex Let me extend your answer a bit. I think this will meet your requirement @bryan

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.workflow = {
      flow: [{
        "id": "1334f68db820f664",
        "step_number": 1,
        "tasks": [{
          "id": "1334f68e3f20f665"
        }]
      }, {
        "id": "1349735b4720857a",
        "step_number": 2,
        "tasks": []
      }, {
        "id": "134967a5ba205f5b",
        "step_number": 4,
        "tasks": [{
          "id": "134972c5b420e027"
        }]
      }, {
        "id": "1334f68e7d209ae6",
        "step_number": 5,
        "tasks": [{
          "id": "1334f68ef6209ae7"
        }]
      }, {
        "id": "13496c4b2a208575",
        "step_number": 3,
        "tasks": []
      }]
    };
  });

  

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <div ng-app="app" ng-controller="ctrl">
      <div ng-repeat="data in orderedList = (workflow.flow | orderBy:'+step_number')">
    index: {{$index}}  - 
    step: {{ data.step_number }} - 
    arrayStep: {{ orderedList[$index].step_number }}
</div>
    </div>

Answer 2

You should be able to output the ordered list to a new variable and go from there:

<div ng-repeat="data in orderedList = (workflow.flow | orderBy:'+step_number')">
    index: {{$index}}  - 
    step: {{ data.step_number }} - 
    arrayStep: {{ orderedList[$index].step_number }}
</div>

You can now referece ordered as the newly ordered list.

Answer 3

ng-repeat creates a new scope and $index is just a simple "loop counter", if you will. Applying an orderBy filter in an ng-repeat will not change the order of the elements in the array being looped, it simply controls the order in which they are displayed in the resulting output. If you need the actual index of the array elements you'll have to use .indexOf(). Here is an example:

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.workflow = {
      flow: [{
        "id": "1334f68db820f664",
        "step_number": 1,
        "tasks": [{
          "id": "1334f68e3f20f665"
        }]
      }, {
        "id": "1349735b4720857a",
        "step_number": 2,
        "tasks": []
      }, {
        "id": "134967a5ba205f5b",
        "step_number": 4,
        "tasks": [{
          "id": "134972c5b420e027"
        }]
      }, {
        "id": "1334f68e7d209ae6",
        "step_number": 5,
        "tasks": [{
          "id": "1334f68ef6209ae7"
        }]
      }, {
        "id": "13496c4b2a208575",
        "step_number": 3,
        "tasks": []
      }]
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="data in workflow.flow | orderBy:'+step_number'">
    index: {{$index}} - step: {{ data.step_number }} - arrayStep: {{ workflow.flow.indexOf(data) }}
  </div>
</div>