angularjs - 剣道UI angularjsグリッド編集

Question

AngularJS と Kendo UI の POC を行っています。更新されたデータを剣道グリッドに保存する方法を知る必要があります。インライン編集を有効にしていますが、更新されたデータを取得するために剣道 UI に接続できません。フィドル ( http://jsfiddle.net/aMz7V/14/ ) を作成しましたが、jsfiddle を機能させることができません (申し訳ありませんが、フィドルを作成するのはこれが初めてです)。そのため、以下のコードを貼り付けました。

JavaScript (コントローラーコード):

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

myApp.controller("gridCtrl", function($scope) {
    $scope.assignments = {};

    $scope.assignments.dataSource = new kendo.data.DataSource({
        data: [
            { StudentName: "John Smith", HomeWork: 9, HomeWork1: 12 },
            { StudentName: "Kodjo Adu", HomeWork: 5, HomeWork1: 15 },
            { StudentName: "Patrick smith", HomeWork: 10, HomeWork1: 19 },
            { StudentName: "Richard lomax", HomeWork: 8, HomeWork1: 18 },
            { StudentName: "Aglade Bone", HomeWork: 7, HomeWork1: 20 }
        ],
        schema: {
            model: {
                fields: {
                    StudentName: { type: "string" },
                    HomeWork: { type: "number" },
                    HomeWork1: { type: "number" },
                }
            }
        },
        pageSize: 3,
    });

    $scope.assignments.columns = [
        { field: 'StudentName', title: 'Student Name' },
        { field: 'HomeWork', title: 'Home Work / 10' },
        { field: 'HomeWork1', title: 'Home Work / 20' }
    ];
});

HTML:

<div ng:app="myApp">
    <div ng-controller='gridCtrl'>
        <div kendo-grid k-data-source="assignments.dataSource" k-selectable="'row'"
         k-pageable='{ "refresh": true, "pageSizes": true }'
         k-columns='{{assignments.columns}}' k-sortable="true" k-editable="true" k-toolbar="['save','cancel']"></div>
    </div>
</div>