Q:

AngularJS: How Could I OrderBy on Dynamic Criteria

I have a requirement to provide dynamic ordering in a certain categorical order (the field names are not alphabetically suited) of boolean values and I don't know how to proceed.
When the header icon is green(off) (also the default), the table should sort by name. When the header icon is clicked, it turns black and the sort order has to be need_vote (if true), has_comment(if true), stale(if true), rest of list and within each option, multiple qualifiers should be sorted by name.
I created a plunker of what I have so far.
HTML
<body ng-controller="MainCtrl">
    <table>
      <tr>
        <th style="text-align:center; width:100px;">
          <span ng-show="pending_view" 
                ng-click="pending_view = 0"
                class="glyphicon glyphicon-exclamation-sign"
                style="color:#000000;"></span>
          <span ng-show="!pending_view" 
                ng-click="pending_view = 1"
                class="glyphicon glyphicon-exclamation-sign"
                style="color:#009900;"></span>
        </th>
        <th>NAME</th>
      </tr>
      <tr ng-repeat="loan in loans | orderBy:'name'">
        <td>
          <!--NEED VOTE-->
          <span ng-show="loan.need_vote" class="glyphicon glyphicon-exclamation-sign" style="color:#000099;"></span>
          <span ng-show="!loan.need_vote" class="glyphicon glyphicon-exclamation-sign" style="color:#FFFFFF;"></span>
          <!--HAS COMMENT-->
          <span ng-show="loan.has_comment" class="glyphicon glyphicon-exclamation-sign" style="color:#e0a02d;"></span>
          <span ng-show="!loan.has_comment" class="glyphicon glyphicon-exclamation-sign" style="color:#FFFFFF;"></span>
          <!--STALE-->
          <span ng-show="loan.stale" class="glyphicon glyphicon-exclamation-sign" style="color:#990000;"></span>
          <span ng-show="!loan.stale" class="glyphicon glyphicon-exclamation-sign" style="color:#FFFFFF;"></span>
        </td>
        <td>{{loan.name}}</td>
      </tr>
    </table>
  </body>

ANGULAR
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.pending_view = false;
  $scope.loans = [
    {need_vote: 0, has_comment: 0, stale: 0, name: 'Parker, Peter'},
    {need_vote: 1, has_comment: 0, stale: 0, name: 'Banner, Bruce'},
    {need_vote: 0, has_comment: 1, stale: 0, name: 'Prince, Diana'},
    {need_vote: 0, has_comment: 0, stale: 0, name: 'Barton, Clink'},
    {need_vote: 0, has_comment: 0, stale: 1, name: 'Wayne, Bruce'},
    {need_vote: 0, has_comment: 1, stale: 1, name: 'Stark, Tony'},
    {need_vote: 1, has_comment: 1, stale: 0, name: 'Romanoff, Natasha'},
    {need_vote: 0, has_comment: 0, stale: 0, name: 'Murdock, Matt'},
    {need_vote: 1, has_comment: 0, stale: 1, name: 'Blake, Donald'},
    {need_vote: 1, has_comment: 1, stale: 1, name: 'Rogers, Steve'}
  ];
});

---UPDATE---
When working correctly, if the icon is green, the list should be sorted by name (WORKING!)
If the icon is black, the sample list should be in this order (all need_votes subsorted by name then all has_comment subsorted by name and then all stale subsorted by name and finally the rest subsorted by name -- 
Banner, Bruce      -- need_vote | name
Blake, Donald      -- need_vote | name
Rogers, Steve      -- need_vote | name
Romanoff, Natasha  -- need_vote | name
Prince, Diana      -- has_comment | name
Stark, Tony        -- has_comment | name
Wayne, Bruce       -- stale | name
Barton, Clint      -- name
Murdock, Matt      -- name
Parker, Peter      -- name

Sorting but incorrectly plunker

A:

UPDATE:
OK, that's completely different issue we are having here. And it requires similar but extended solution.
Consider this: you have multiple fields and you require several of them to figure out order in which to sort. In this case you can create compound sorting property and use formula like this:
 compoundSortField = 2**N * fieldN  + 2**(N-1) * fieldN-1 ... field1

In your case it is going to be:
 compoundSort = 4 * need_vote + 2 * has_comment + stale

You can alter you json by hand or do it after each ajax request with real data.
Next thing is orderBy accepts array of arguments which makes it possible to do this:
 <tr ng-repeat="loan in loans | orderBy:[myOrder, 'name']">

Which means that it first will be ordered by myOrder and then by name.
Code of your controller will be changed to:
 $scope.orderOptions = ['name','-compoundSort']

And your button will be switching between name and -compoundSort making it double sort by name or sort by descending compound sort and then by name.
Alternatively you can have two arrays:
 $scope.simpleOrder = ['name']

 $scope.complexOrder = ['-compoundSort', 'name']

 $scope.myOrder = $scope.simpleOrder

And switch myOrder between them.
Update plnkr here: http://plnkr.co/edit/dS9PNFdCiuP2p6RPPha2?p=preview
Here is your updated fiddle: http://plnkr.co/edit/EDHUJHxW5V2W5L8RHapn?p=preview
Filter orderBy accepts string as a parameter, but you do not need to provide string literal, it can be variable in scope ( or controller field if you use controllerAs etc ) 
<tr ng-repeat="loan in loans | orderBy:myOrder">

given that you will have several elelemts like 
  ... ng-click='myOrder="name"'

  ... ng-click='myOrder="need_vote"'

In order to have one button doing loop of options you can do this:
 $scope.orderOptions = ['name', 'need_vote', ...]

 $scope.myOrder = 'name'

 $scope.orderOption = 0

 $scope.nextOrder = function() {
    $scope.orderOption ++ 
    if ($scope.orderOption >= $scope.orderOptions.length) $scope.orderOption = 0

    $scope.myOrder = $scope.orderOptions[$scope.orderOption]         
 }

 ...

 ng-click='nextOrder()'

