Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<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>

JavaScript

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) {
           ...