Kendo Angular Grid

var app = angular.module('plunker', ["kendo.directives"]);

app.controller('MainCtrl', function() {
  this.appName = "Kendo Angular Grid";
  this.logMsg = [];


  // this.grid { get; set; }
  this.gridOptions = {
    selectable: "multiple, row",
    sortable: true,
    pageable: true,
    editable: false,
    dataSource: {
      type: "odata",
      transport: {
        read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
      },
      pageSize: 25,
      serverPaging: true,
      serverSorting: true
    },
    columns: [{
      field: "FirstName",
      title: "First Name",
      width: "120px"
    }, {
      field: "LastName",
      title: "Last Name",
      width: "120px"
    }, {
      field: "Country",
      width: "120px"
    }, {
      field: "City",
      width: "120px"
    }, {
      field: "Title"
    }]
  }


  // ======= grid events ==============
  this.onChange = function(locale) {
    var selectedRows = locale.selected;
    this.logMsg.push("---------------");
    for (var i = 0; i < selectedRows.length; i++){
      var dto = this.grid.dataItem(selectedRows[i]);
      this.logMsg.push(dto.FirstName + " " + dto.LastName);
    }
  }


  // ======== others ==================
  this.clearLogs = function() {
    this.logMsg = [];
  }

  this.logMsg.push("compiled.");

});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>

  <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css" />
  <link rel="stylesheet" href="style.css" />

  <script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
  <script src="//kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
  <script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl as ctrl">
  <h1>{{ctrl.appName}}!</h1>
  <div class="container">
    <div kendo-grid="ctrl.grid" k-options="ctrl.gridOptions" k-on-change="ctrl.onChange({ selected: selected })"></div>
  </div>
  <div class="container">
    <hr />
    <h3>Log Messages <button type="button" ng-click="ctrl.clearLogs()">clear log</button></h3>
    <ul class="console">
      <li ng-repeat="l in ctrl.logMsg track by $index">{{l}}</li>
    </ul>
  </div>
</body>

</html>

/* Put your css in here */

.console {
  font-family: "courier new";
  font-size: 10pt;
}

.container {
  margin-top: 25px;
  margin-bottom: 25px;
}