<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-orderBy-custom-comparator-production</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="script.js"></script>
  

  
</head>
<body ng-app="orderByExample4">
  <div ng-controller="ExampleController">
  <div class="friends-container custom-comparator">
    <h3>Custom Sorting</h3>
    <table class="friends">
      <tr>
        <th>Key</th>
        <th>Value</th>
      </tr>
      <tr ng-repeat="status in tenantTaskStatusList | orderBy:'Key':false:customSort">
        <td>{{status.Key}}</td>
        <td>{{status.Value}}</td>
      </tr>
    </table>
  </div>
  <div class="friends-container default-comparator">
    <h3>Default Sort</h3>
    <table class="friends">
      <tr>
        <th>Key</th>
        <th>Value</th>
      </tr>
      <tr ng-repeat="status in tenantTaskStatusList | orderBy:'Key'">
        <td>{{status.Key}}</td>
        <td>{{status.Value}}</td>
      </tr>
    </table>
  </div>
</div>
</body>
</html>

<!-- 
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
(function(angular) {
  'use strict';
  angular.module('orderByExample', [])
  .controller('ExampleController', ['$scope', function($scope) {

  $scope.tenantTaskStatusList = [
    { "Key": 0, "Value": "New"}, 
    { "Key": 1, "Value": "In Process"}, 
    { "Key": 2, "Value": "Rejected"}, 
    { "Key": 3, "Value": "Incomplete"}, 
    { "Key": 4, "Value": "Cancelled" }, 
    { "Key": 5, "Value": "Complete"}];  

    $scope.customSort = function(v1, v2) {
      var hashList = {
        1: 0,
        0: 1,
        5: 2,
        4: 3,
        2: 4,
        3: 5
      };
      console.log(v1, v2);
      if (hashList[v1.value] === hashList[v2.value]) return 0;
      if (hashList[v1.value] > hashList[v2.value]) return 1;
      return -1;
    };
  }]);
})(window.angular);
.friends-container {
  display: inline-block;
  margin: 0 30px;
}

.friends {
  border-collapse: collapse;
}

.friends th {
  border-bottom: 1px solid;
}
.friends td, .friends th {
  border-left: 1px solid;
  padding: 5px 10px;
}
.friends td:first-child, .friends th:first-child {
  border-left: none;
}

/*
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
Create a custom sort that can be used by Angular's orderBy filter.  
This gives you the ability to change the order of a custom list like
an enumeration without having to change the physical order of your
enumeration.