<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="style.css">
  </head>

  <body ng-app="datatablesSampleApp">
    <div ng-controller="bootstrapCtrl" class="code">
      <table datatable dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped table-bordered"></table>
    </div>
    
    <script data-require="jquery@1.10.1" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
    <script src="//cdn.datatables.net/plug-ins/725b2a2115b/sorting/date-euro.js"></script>
    <script type="text/javascript" data-require="angular.js@1.2.15" data-semver="1.2.15" src="http://code.angularjs.org/1.2.15/angular.js"></script>
    <script type="text/javascript" src="https://rawgithub.com/l-lin/angular-datatables/dev/dist/angular-datatables.min.js"></script>
    <script src="script.js"></script>
  </body>

</html>
(function(angular) {
    'use strict';
    angular.module('datatablesSampleApp', ['datatables']).
    controller('bootstrapCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder) {
        $scope.dtOptions = DTOptionsBuilder
            .fromSource('data.json')
            // Add Bootstrap compatibility
            .withBootstrap();
        $scope.dtColumns = [
            DTColumnBuilder.newColumn('id').withTitle('ID').withClass('text-danger'),
            DTColumnBuilder.newColumn('firstName').withTitle('First name'),
            DTColumnBuilder.newColumn('lastName').withTitle('Last name'),
            DTColumnBuilder.newColumn('date').withTitle('Date').withOption('sType', 'date-euro')
        ];
    });
})(angular);
[{
    "id": 860,
    "firstName": "Superman",
    "lastName": "Yoda",
    "date": "01/03/2014 10:11:10"
}, {
    "id": 870,
    "firstName": "Foo",
    "lastName": "Whateveryournameis",
    "date": "01/03/2014 10:12:10"
}, {
    "id": 590,
    "firstName": "Toto",
    "lastName": "Titi",
    "date": "04/03/2014 15:30:20"
}]
body {
    margin-top: 30px;
    width: 97%;
}