Stackoverflow Example: ng-grid model delay example

by TwitchBronBron

HTML

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script src="http://angular-ui.github.io/ng-grid/lib/ng-grid.debug.js"></script>
<link rel="stylesheet" href="http://angular-ui.github.io/ng-grid/css/ng-grid.css">
<div id="body">
    <div ng-controller="MyController as vm">
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </div>
</div>

CSS

#hasPopover {
    height:50px;
    background-color: red;
    cursor: pointer;
}

.gridStyle{
    height:300px;
}

JavaScript

var app = angular.module('app', ['ngGrid']);

app.controller('MyController', ['$scope', function ($scope) {
 $scope.gridOptions = {
        data: 'myData',
        enablePinning: true,
        columnDefs: [{ field: "name", width: 120, pinned: true , 
                     headerCellTemplate: ' <div id="hasPopover" pop-over>Click to filter</div>' 
                     },
                    { field: "age", width: 120 },
                    { field: "birthday", width: 120 },
                     { field: "salary", width: 120}]
    };
    $scope.myData = [{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
                    { name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
                    { name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "50,000" },
                    { name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "40,000" },
                    { name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" },
                    { name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
                    { name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
                    { name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "40,000" },
                    { name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "50,000" },
                    { name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" },
                    { name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
                    { name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
                    { name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "40,000" },
                    { name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "50,000" },
                    { name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" }];
}]);


app.directive('popOver', function ($compile) {
    var...