AngularJS DataTables directive

Forked from: http://jsfiddle.net/zdam/pb9ba/ Allows the dataTables plugin to be used from an angular directive. Still needs some clean up, but a POC that works is a nice start.

by shaneburgess

HTML

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/css/jquery.dataTables.css">
<div ng-app="tableExample">
    <div ng-controller="Ctrl">
        <button ng-click="addData()">Add Data</button>
         <h2>This table uses columns defined in controller</h2> 
        <table my-table options="options"></table>
    </div>
</div>

CSS

</style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <!-- DataTables --> <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/jquery.dataTables.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script> <style> .ng-invalid {
    border: 1px solid red;
}
body {
    font-family: Arial, Helvetica, sans-serif;
}
body, td, th {
    font-size: 14px;
    margin: 0;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
    display: table;
    margin-bottom: 0;
    margin-top: 0;
    -moz-box-sizing: border-box;
    text-indent: 0;
}
a:link, a:visited, a:hover {
    color: #5D6DB6;
    text-decoration: none;
}
.error {
    color: red;
}
.ui-helper-hidden {
    display: none;
}

JavaScript

var dialogApp = angular.module('tableExample', []);

dialogApp.directive('myTable', function () {
    return {
        restrict: 'E, A, C',
        link: function (scope, element, attrs, controller) {
            var dataTable = element.dataTable(scope.options);

            scope.$watch('options.aaData', handleModelUpdates, true);

            function handleModelUpdates(newData) {
                var data = newData || null;
                if (data) {
                    dataTable.fnClearTable();
                    dataTable.fnAddData(data);
                }
            }
        },
        scope: {
            options: "="
        }
    };
});

function Ctrl($scope) {
    $scope.options = {
        aoColumns: [{
            "sTitle": "Surname"
        }, {
            "sTitle": "First Name"
        }],
        aoColumnDefs: [{
            "bSortable": false,
            "aTargets": [0, 1]
        }],
        bJQueryUI: true,
        bDestroy: true,
        aaData: [
            ["Webber", "Adam"]
        ]
    };

    $scope.addData = function () {
        $scope.counter = $scope.counter + 1;
        $scope.options.aaData.push([$scope.counter, $scope.counter * 2]);
    };

    $scope.counter = 0;
}