Kendo grid dirty Cells

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">
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div data-ng-app="app">
    <div data-ng-controller="Grid as vm">
        <div id="gridID" pckendo kendo-grid='grid' k-options="vm.options"></div>  	
    </div>
</div>

CSS

.k-dirty-cell{
 
  background-color: blue
  
}

JavaScript

angular
  .module("app", ["kendo.directives"])
  .controller("Grid", Grid)
  .directive('pckendo', PCKendo);

var pendingChanges = [];

function gridEdit(e) {
  var cellHeader = $("#gridID").find("th[data-field='" + e.field + "']");
  if (cellHeader[0] != undefined) {
    var pendingChange = new Object();
    //Holds field name
    pendingChange.PropertyName = e.field;
    //Keeps track of which td element to select when re-adding the red triangle
    pendingChange.ColumnIndex = cellHeader[0].cellIndex;
    //used to pull row.  Better than the row's id because you could have
    //multiple rows that have been inserted but not saved (ie. all have
    //ID set to 0
    pendingChange.uid = e.items[0].uid;
    //Remember to clear this out after you save
    pendingChanges.push(pendingChange);
  }
}

// Grid controller constructor
function Grid() {
  var vm = this;

  vm.editMode = false;

  vm.gridData = getDataSource();

  vm.rowChangedCallback = function (grid, prevRow) {
    //console.log("calling vm.gridData.sync");


    // clear dirty flag from the database
    var dirtyRows = $.grep(vm.gridData.view(),
      function (item) {
        return item.dirty == true;
      })

    if (dirtyRows && dirtyRows.length > 0) {
      dirtyRows[0].dirty = false;
    }

    // clear cell property (red indicator)
    for (var i = 0; i < pendingChanges.length; i++) {
      var row = grid.tbody.find("tr[data-uid='" + pendingChanges[i].uid + "']");
      var cell = row.find("td:eq(" + pendingChanges[i].ColumnIndex + ")");

      if (cell.hasClass("k-dirty-cell")) {
        cell.removeClass("k-dirty-cell");

        console.log("removed dirty class");
      }
    }
    
    pendingChanges.length = 0;

    // No good, we loose current cell again! (sigh..)
    //grid.refresh();
  }

  vm.options = {
    height: 500,
    navigatable: true,
    sortable: true,
    editable: true,

    edit: function () {
      vm.editMode = true;
      console.log("editing");
    },
    cancel:...