I am creating a plunker for another question but I cannot get angular-datatables to sort without configuration.
I have code from a project that responds to sorting when users click on header columns but it just does not want to sort in plunkr.
Am I missing any sort of configuration or overlooking anything?
How do I make the table sortable using default settings?
Plunkr
https://plnkr.co/edit/71RqBQ0HF7ThDyZPpc1E?p=info
HTML
<!DOCTYPE html>
<html>
<head>
<link data-require="[email protected]" data-semver="1.9.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css" />
<script data-require="[email protected]" data-semver="1.10.1" src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script data-require="[email protected]" data-semver="1.9.4" src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.js"></script>
<script type="text/javascript" data-require="[email protected]" data-semver="1.2.15" src="//code.angularjs.org/1.2.15/angular.js"></script>
<script type="text/javascript" src="//rawgithub.com/l-lin/angular-datatables/dev/dist/angular-datatables.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="datatablesSampleApp">
<div ng-controller="simpleCtrl">
<div class="table-responsive">
<table datatable="ng" class="table" >
<thead style="background-color: #d8d8d8;">
<tr>
<th>Product</th>
<th>Tag Name</th>
<th>Unit Size</th>
<th>Unit Cost</th>
</tr>
</thead>
<tbody>
<tr style="font-weight: 100;" ng-repeat="data in items | filter:{ TagName: filterTag, TagId: filterId} | filter:searchText" >
<td class="td-line-height" style="font-weight: 600;';">{{data.Product}}</td>
<td class="td-line-height">{{data.TagName}} </td>
<td class="td-line-height">{{data.UnitSize}} </td>
<td class="td-line-height">{{data.UnitCost | currency}} </td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
