title: Custom sort function in ng-repeat
body: <p>I have a set of tiles that display a certain number depending on which option is selected by the user.  I would now like to implement a sort by whatever number is shown.</p>
  
  <p>The code below shows how I've implemented it (by gettting/setting a value in the parent cards scope).  Now, because the orderBy function takes a string, I tried to set a variable in the card scope called curOptionValue and sort by that, but it doesn't seem to work.</p>
  
  <p>So the question becomes, how to I create a custom sort function?</p>
  
  <pre><code>&lt;div ng-controller="aggViewport" &gt;
  &lt;div class="btn-group" &gt;
      &lt;button ng-click="setOption(opt.name)" ng-repeat="opt in optList" class="btn active"&gt;{{opt.name}}&lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="container" iso-grid width="500px" height="500px"&gt;
      &lt;div ng-repeat="card in cards" class="item {{card.class}}" ng-controller="aggCardController"&gt;
          &lt;table width="100%"&gt;
              &lt;tr&gt;
                  &lt;td align="center"&gt;
                      &lt;h4&gt;{{card.name}}&lt;/h4&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td align="center"&gt;&lt;h2&gt;{{getOption()}}&lt;/h2&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;        
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and controller : </p>
  
  <pre><code>module.controller('aggViewport',['$scope','$location',function($scope,$location) {
      $scope.cards = [
          {name: card1, values: {opt1: 9, opt2: 10}},
          {name: card1, values: {opt1: 9, opt2: 10}}
      ];
  
      $scope.option = "opt1";
  
      $scope.setOption = function(val){
          $scope.option = val;
      }
  
  }]);
  
  module.controller('aggCardController',['$scope',function($scope){
      $scope.getOption = function(){
          return $scope.card.values[$scope.option];
      }
  }]);
  </code></pre>