<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.6.2/angular-datatables.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="datatablesSampleApp">
<div ng-controller="sampleCtrl">
<table datatable dt-options="dtOptions">
<thead>
<tr>
<th>ID</th>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>123</td>
<td>Someone</td>
<td>Youknow</td>
</tr>
<tr>
<td>987</td>
<td>Iamout</td>
<td>Ofinspiration</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
(function(angular) {
'use strict';
angular.module('datatablesSampleApp', ['datatables']).
controller('sampleCtrl', function($scope, DTOptionsBuilder) {
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withPaginationType('full_numbers')
.withDisplayLength(2)
.withOption('order', [1, 'desc']);
});
})(angular);