Ranking table with sorting & dynamic columns
<p>I'm trying to do a ranking table : <br></p>

<p>I have an object <code>scores</code> with the total of points, and each "challenge" with the points associated to this challenge. My principal problem is to run through <code>scores</code> to create a <code>th</code> tag for each challenge &amp; to sort these after. </p>

<p><strong>The aims :</strong></p>

<ul>
<li>The number of challenge must be dynamic</li>
<li>Sort by total (done) &amp; by challenge</li>
</ul>

<p><strong>My problems :</strong> </p>

<ul>
<li>How use ng-repeat for the array of challenge</li>
<li>How to sort these</li>
</ul>

<p><strong>My advancement :</strong> </p>

<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>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] &gt; b[field] ? 1 : -1);
      });
      if(reverse) filtered.reverse();
      return filtered;
    };
  });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div ng-controller="MyCtrl"&gt;
  &lt;table&gt;
      &lt;tr&gt;
        &lt;th&gt;Rank&lt;/th&gt;
        &lt;th&gt;
          &lt;span ng-click="toggleSort($index);sortReverse=false"&gt;+&lt;/span&gt; 
          Total 
          &lt;span ng-click="toggleSort($index);sortReverse=true"&gt;-&lt;/span&gt;
        &lt;/th&gt;
        &lt;th ng-repeat="challenge in scores.challenges"&gt;
          &lt;span ng-click="toggleSort($index);sortReverse=false"&gt;X&lt;/span&gt; 
          Challenge n° 
          &lt;span ng-click="toggleSort($index);sortReverse=true"&gt;Y&lt;/span&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
      &lt;tbody ng-repeat="score in scores | orderObjectBy:sortType:sortReverse"&gt;
        &lt;tr&gt;
          &lt;td&gt;{{ $index+1 }}&lt;/td&gt;
          &lt;td&gt;{{ score.total }}&lt;/td&gt;
          &lt;td ng-repeat="challenge in score.challenges"&gt;{{ challenge.point }}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<blockquote>
  <p><a href="http://jsfiddle.net/Lvc0u55v/13558/" rel="nofollow noreferrer">JSFiddle</a></p>
</blockquote>

<p><br>
<strong>Thank you!</strong></p>