Kendo UI Grid

Local data, mobile scrolling.

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng:app="myApp">
    <div ng:controller="Tester">
        <kendogrid source="people" groupable="true"  columns="columns" pageable="true"></kendogrid>
        <input type="text" ng-model="nameInput">
        <input type="number" ng-model="ageInput">
        <button ng-click="onSubmit()" type="button">Submit</button>
    </div>
</div>

<script type="text/ng-template"  id="gridScript">
    <div id="grid" style="height: 380px" data-role="grid" class="k-grid k-widget" tabindex="0">
    <div class="k-grouping-header" data-role="droptarget">Drag a column header and drop it here to group by that column</div>
    <div class="k-grid-header" style="padding-right: 17px; ">
        <div class="k-grid-header-wrap">
            <table cellspacing="0">
                <colgroup>
                    <col ng-repeat="cols in columns" ng-style="getStyle(cols)">
                </colgroup>
                <thead>
                <tr>
                    <th ng-repeat="cols in columns" data-field="cols.field" data-title="cols.title" class="k-header" data-role="sortable">
                        <a class="k-link" href="#">{{cols.title}}</a>
                    </th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
    <div class="k-grid-content" style="height: 287px; ">
        <table cellspacing="0" class="k-focusable">
            <colgroup>
                <col ng-repeat="cols in columns" ng-style="getStyle(cols)">
            </colgroup>
            <tbody>
            <tr ng-repeat="element in source" ng-class-even="'k-alt'">
                <td>{{element.name}}</td>
               ...

JavaScript

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

myApp.directive('kendogrid', function() {
    return {
        restrict: 'E',
        replace: true,
        scope:{source:'=source',columns:'=columns'},
        template: $("#gridScript").html(),
        link: function(scope,element,attrs) {
           scope.getStyle = function(col){
                    if(col.width){
                        return {width :col.width+"px;"}
                    }
                }
        }
    };
});



function Tester($scope) {
        
        $scope.columns = [ {
                                field: "name",
                                width: 90,
                                title: "First Name"
                            } , {
                                field: "age",
                                width: 90,
                                title: "Last Name"
                            } 
                        ];
    var man1 = new Man('name1', 25);
    var man2 = new Man('name2', 28);
    var man3 = new Man('name3', 21);
    $scope.onSubmit = function(){
        if($scope.nameInput !== "" && $scope.ageInput !== "")
        {
            var myman = new Man($scope.nameInput,$scope.ageInput);
            $scope.people.push(myman);
        }
    }
    $scope.people = [man1, man2, man3];
}

function Man(name, age) {
    this.name = name;
    this.age = age;
}