In addition to the scripts required by Kendo UI you must include the Angular library scripts and the Angular/Kendo integration script.
Here is a full example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Angular + Kendo</title>
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.bootstrap.min.css">
<script src='//code.jquery.com/jquery-1.9.1.js'></script>
<script src="//cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>
<script src="//kendo-labs.github.io/angular-kendo/angular-kendo.js"></script>
</head>
<body ng-app="angular-kendo-example">
<div ng-controller="GridController">
<div kendo-grid k-options="options" k-data-source="northwind"></div>
</div>
<script>
angular.module('angular-kendo-example', ['kendo.directives']);
function GridController($scope) {
$scope.options = {
sortable: true,
pageable: 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"
}]
};
$scope.northwind = {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 5,
serverPaging: true,
serverSorting: true
};
}
</script>
</body>
</html>