如何使用带有隐含的角度指令对表进行排序

我创建了通过单击对表进行排序的指令<th>但无法对函数正确执行进行排序。我的问题是如何按升序/降序对数据进行排序。该指令可以与任何静态或动态表链接，然后使用 tranclude 和$compile我们创建自己的表，我们应该能够对数据进行排序。

任何帮助或评论我的代码都会对我有好处。

这是小提琴的链接：http://jsfiddle.net/Lvc0u55v/3259/

<div class="container">
<div class="row">
  <table table-directive>
    <thead><tr>
      <th>Number</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>5</td>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>2</td>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
  </tbody>
</table>
</div>
</div>

var myApp = angular.module('myApp',[]);
    myApp.directive('tableDirective', function($compile) {
        return{
        restrict: 'EAC',
        scope: {},
        link: function(scope, element, attrs){
           var table, thead, tableHead, cells, template, compileScope, template, tableBody, cellsLength, newRow, rowCount;
                compileScope = scope;
                cells = angular.element($('td'));
                table = angular.element($('table'));
                thead = angular.element($('th'));
                rowCount = element.find($('tr')).length;
                newRow = '';
                cellsLength = table[0].rows[0].cells.length;
                scope.thRows = [];
                scope.tdRows = [];
                scope.newArr = [];
                angular.forEach(thead, function(item) {
                    return scope.thRows.push(item.innerHTML);
                });
                angular.forEach(cells, function(item) {
                    scope.tdRows.push(item.innerHTML);
                });
                while(scope.tdRows.length) {
                    scope.newArr.push(scope.tdRows.splice(0, cellsLength));
                }

                // Add <td></td>  dependent  on cellsLength
                for (var i = 0; i < rowCount; i++) {
                    newRow += '<tr class="tbodyRow" ><td ng-repeat="n in newArr[' + i + '] track by $index">{{n}}</td></tr>';
                }
                scope.newArr.sort( function( a, b )
                {
                  // Sort by the 2nd value in each array
                  if ( a[1] == b[1] ) return 0;
                  return a[1] < b[1] ? -1 : 1;
                });
                scope.newArr.sort();
    ;
                tableHead = '<thead><tr><th ng-click="sortData($index)" class="thclass" ng-repeat="th in thRows">{{th}}</th></tr></thead>';
                tableBody = '<tbody>' + newRow + '</tbody>';
                template = angular.element(tableHead + tableBody);
                $compile(template)(compileScope);
                element.html(template);
                 scope.sortData = function ($index) {
                    alert('sort Data');
                    scope.index = $index;
                    alert(scope.index);
                };
        }
      }
    });
    //myApp.factory('myService', function() {});
    function MyCtrl($scope) {
        $scope.name = 'Superhero';
    }