SlickGrid with AngularJS Ctrl+Directive

This example demonstrates the integration of SlickGrid with AngularJS Directive

HTML

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/lib/jquery.event.drag-2.2.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.core.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.grid.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/Celebio/SlickGrid/master/slick.grid.css">
<link rel="stylesheet" href="https://rawgithub.com/Celebio/SlickGrid/master/slick-default-theme.css">
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.formatters.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.editors.js"></script>
<div ng-app="slickGridApp">
    <div ng-controller="Ctrl">
        <h2>SlickGrid with AngularJS Directive</h2><br/><br/>
         <div slick-Dir style="width:600px;height:200px;"></div><br/><br/>
         <button ng-click="add()">Add Row</button><button ng-click="del()">Delete Row</button><button ng-click="save()">Save</button>
        
    </div>
</div>

<script type='text/javascript'>
angular.module('slickGridApp', [])
.directive('slickDir', [function () {
    return {
        restrict: 'EA',
        link : function(scope, element, attrs){
            for (var i = 0; i < 5; i++) {
                var d = (scope.data[i] = {});

                d["id"] = "id_" + i;
                d["num"] = i;
                d["title"] = "Task " + i;
                d["duration"] = "5 days";
                d["percentComplete"] = Math.round(Math.random() * 100);
                d["start"] = "01/01/2009";
                d["finish"] = "01/05/2009";
                d["effortDriven"] = (i % 5 == 0);
            }
       ...

CSS

.customSelected {
    z-index: 10;
    background: #DFE8F6 !important;
}
.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;
}