Kendo grid saving and adding data

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="ttp://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.silver.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<div data-ng-app="app">
    <div data-ng-controller="Grid as vm">
        <div kendo-grid='grid' k-options="vm.options"></div>
        <div>{{vm.msg}}</div>
    </div>
</div>

JavaScript

angular.module("app", ["kendo.directives"])
    .controller("Grid", Grid)

function Grid() {
    var vm = this;

    vm.gridData = getDataSource();
    vm.options = {
        navigatable: true,
        sortable: true,
        editable: true,
        toolbar: [{
            name: "mycreate",
            text: "Add new"
        }, "save", "cancel"],
        saveChanges: function (e) {
            saveChanges(e, vm);
        },
        columns: getColumns(),
        dataSource: vm.gridData,

    };

    $(document).on("click", ".k-grid-mycreate", function () {
        console.log("addRow called");
        var dataSource = vm.gridData;
        var row = {
            col1: new CellData(null, 'data3-5'),
            col2: new CellData(null, 'data3-6')
        };

        console.log(dataSource);
        dataSource.add(row);
    });
}

function saveChanges(e, vm) {
    var data = vm.gridData;
    //vm.msg = "saveChanges called"; doesn't update div for some reason
    console.log("saveChanges called");

    // Now how do we make this call the tranport update, 
    // and also indicate to the grid that the data is saved
    // (so that the top left 'dirty" cell indicators are removed)
}


function getDataSource() {
    var gridData = [{
        col1: new CellData('1', 'data1-1'),
        col2: new CellData('2', 'data1-2')
    }, {
        col1: new CellData('3', 'data2-1'),
        col2: new CellData('4', 'data2-2')
    }, ];

    // Need to bind to a data source. If pass just the dataservice.getData(viewName) result,
    // the grid takes a copy of this and put into it's own internal data source. If we pass this one,
    // we can get at the modified values.       
    var dataSrc = new kendo.data.DataSource({
        batch: true,

        transport: {
            read: function (e) {
                e.success(gridData);
            },

            update: function (e) {
                console.log("update", e);
                // batch is enabled
                var...