Ranking table with sorting & dynamic columns - angularjs

Question

I'm trying to do a ranking table :
I have an object scores with the total of points, and each "challenge" with the points associated to this challenge. My principal problem is to run through scores to create a th tag for each challenge & to sort these after.
The aims :
The number of challenge must be dynamic
Sort by total (done) & by challenge
My problems :
How use ng-repeat for the array of challenge
How to sort these
My advancement :
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.sortType = 'points';
$scope.sortReverse = false;
$scope.scores = {
"6":{
"total":5,
"challenges":{
"1":{
"challengeId":1},
"2":{
"point":2,
"challengeId":2}
}
},
"21":{
"total":2,
"challenges":{
"1":{
"point":1,
"challengeId":1},
"2":{
"point":1,
"challengeId":2}
}
},
}
}
myApp.filter('orderObjectBy', function() {
return function(items, field, reverse) {
var filtered = [];
angular.forEach(items, function(item) {
filtered.push(item);
});
filtered.sort(function (a, b) {
return (a[field] > b[field] ? 1 : -1);
});
if(reverse) filtered.reverse();
return filtered;
};
});
<div ng-controller="MyCtrl">
<table>
<tr>
<th>Rank</th>
<th>
<span ng-click="toggleSort($index);sortReverse=false">+</span>
Total
<span ng-click="toggleSort($index);sortReverse=true">-</span>
</th>
<th ng-repeat="challenge in scores.challenges">
<span ng-click="toggleSort($index);sortReverse=false">X</span>
Challenge n°
<span ng-click="toggleSort($index);sortReverse=true">Y</span>
</th>
</tr>
<tbody ng-repeat="score in scores | orderObjectBy:sortType:sortReverse">
<tr>
<td>{{ $index+1 }}</td>
<td>{{ score.total }}</td>
<td ng-repeat="challenge in score.challenges">{{ challenge.point }}</td>
</tr>
</tbody>
</table>
</div>
JSFiddle
Thank you!

Answer 1

I updated the fiddle. When you want to order by a nested value this is how you specify the orderString (In your case it will be by a particular challenge ID):
$scope.orderType = "challenges."+challengeId+'.point';
Also I added a filter which convert the object in an array:
.filter('orderObjectBy', function() {
return function (items, field, reverse) {
var filtered = [];
angular.forEach(items, function(item, key) {
item.key = key;
filtered.push(item);
});
return filtered;
};
});
Then your html should look like this:
<tbody ng-repeat="score in scores| orderObjectBy | orderBy: orderType:sortReverse">
<tr>
<td>{{ $index+1 }}</td>
<td>{{ score.total }}</td>
<td ng-repeat="challenge in score.challenges">{{ challenge.point }}</td>
</tr>
</tbody>
Check this working sample: http://jsfiddle.net/Lvc0u55v/13564/