How to Sort Table with Angular Directive with transclude

Question

I created directive to sort table with click on <th> but can't sort the function execute properly. My question is how to sort data in ascending / descending order. The directive can be linked with any static or dynamic table then with tranclude and $compile we creating our own table and we should have the ability to sort data.

Any help or comment my code will be good for me.

Here is a link to the fiddle: 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';
    }

Answer 1

You can sort a 2d array like this:

http://jsfiddle.net/Lvc0u55v/3261/

         scope.sortData = function ($index) {
            scope.index = $index;
            scope.newArr.sort(function (a, b) {
                return a[$index] > b[$index];
            });
        };

From this Post

Answer 2

Try to build an array of objects with column headers as properties and use the angular orderBy filter on ng-repeat