title: AngularJs Table Sorting when Data is nested
body: <p>How can I approach table sorting in angularjs, when my data is nested and not all columns are first level citizens of the objects. </p>
  
  <p><strong>Data (excerpt)</strong></p>
  
  <pre><code>[
      {
          "name": "Team A",
          "categories": [
              {
                  "label": "FG%",
                  "value": 4676,
                  "points": 7
              },
              {
                  "label": "FT%",
                  "value": 8387,
                  "points": 9
              }
          ]
      }, {
          "name": "Team B",
          "categories": [
              {
                  "label": "FG%",
                  "value": 5285,
                  "points": 10
              },
              {
                  "label": "FT%",
                  "value": 6111,
                  "points": 1
              }
          ]
      }
  ]
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div ng-controller="mainCtrl"&gt;
      &lt;table class="table table-striped table-condensed"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th ng:click="changeSorting('name')"&gt;Name&lt;/th&gt;
                  &lt;th ng:click="changeSorting('name')"&gt;Points&lt;/th&gt;
                  &lt;th ng:click="changeSorting(value.label)" ng-repeat="(index, value) in data.teams[0].categories"&gt;{{value.label}}&lt;/th&gt;
  
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr ng-repeat="team in data.teams | orderBy:sort.column:sort.descending "&gt;
                  &lt;td&gt;{{team.name}}&lt;/td&gt;
                  &lt;td&gt;{{team.totalPoints}}&lt;/td&gt;
                  &lt;td ng-repeat="(name, cat) in team.categories"&gt;
                      {{cat.value}}
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is a approach I found a few times. Anyway, because of the structure of my data, I am afraid this isn't the right idea.</p>
  
  <p><strong>Sorting on Controller</strong></p>
  
  <pre><code>$scope.sort = {
      column: 'name',
      descending: false
  };
  
  $scope.changeSorting = function(column) {
      var sort = $scope.sort;
      if (sort.column == column) {
          sort.descending = !sort.descending;
      } else {
          sort.column = column;
          sort.descending = false;
      }
  };
  </code></pre>
  
  <p>Here is the updated fiddle: <a href="http://jsfiddle.net/SunnyRed/mTywq/2/" rel="nofollow">http://jsfiddle.net/SunnyRed/mTywq/2/</a></p>