AngularJS : orderBy on array not working

Question

I am trying to order a list i'm showing in the front end. This is the json I am passing it from the my angular controller:

My Json Sample here

I am passing it an array filled with some amount of those arrays.

I want to order the list by the internalRanking, which I can make a string or int, but it will not always be the same length. I have tried looking online but I don't think I need to create a custom filter as it is iterating over an array containing some amount of the above array. My HTML is:

<form class="form-inline">
  <input ng-model="query" type="text" placeholder="Filter by" autofocus>
</form>
<ul ng-repeat="rankingData in allRankingData | filter:query | orderBy:allRankingData[0].entries[0].internalRanking">
  <li>{{index}}</li>
  <li>{{rankingData[0].entries[0].playerOrTeamName}}</li>
  <li>{{rankingData[0].tier}} {{rankingData[0].entries[0].division}} - {{rankingData[0].entries[0].leaguePoints}}LP</li>
  <li>{{rankingData[0].entries[0].internalRanking}}</li>
</ul>

It just isn't ordering anything. The last list line of

{{rankingData[0].entries[0].internalRanking}}

is printing out the value fine, so that reference is correct.

Does anyone have any ideas? I can post more code if necessary

Answer 1

Here is a working JSFiddle to help you with an example. Walk through the code and observe how orderBy is being used. Also, observe how a nesting can be done.

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', function($scope) {

    $scope.people = [{
        "name": "Bob Jones",
        "scores": [
		{date:"01/10/2010",value:40},
		{date:"01/10/2014",value:41},
		{date:"01/10/2011",value:43},
		{date:"01/10/2014",value:49}
		]
    },{
        "name": "Adam Johnson",
        "scores": [
		{date:"01/10/2013",value:39},
		{date:"01/10/2015",value:31},
		{date:"01/10/2013",value:32},
		{date:"01/10/2011",value:21}]
    },{
        "name": "Mary Hills",
        "scores": [
		{date:"01/10/2014",value:92},
		{date:"01/10/2014",value:73},
		{date:"01/10/2013",value:89},
		{date:"01/10/2011",value:88}]
    }];


});

<div ng-controller='myCtrl'>
    <ul ng-repeat="person in people">
        <li>{{person.name}}</li>
        <ul ng-repeat="score in person.scores | orderBy:'date'">
            <li>{{score.date}}:{{score.value}}</li>
        </ul>
    </ul>
</div>