• Demonstrates the KendoUI DropdownList widget displaying the countries
  • Pay attention to inclusion of "kendo.directives" module while instantiating kendoApp. This is very important part.
  • Pay attention to kendo.angular.min.js which defines various different kendo directives
  • Pay attention to k-options directive in select element
Copy & Paste Code for Hello World

As all the files are retrieved from CDNs, you could copy and paste the code and get started with KendoUI and AngularJS in no time.

<!DOCTYPE html>

<html ng-app="helloKendo">
<link rel="stylesheet" href="//">
<link href="//" rel="stylesheet" />
<link href="//" rel="stylesheet" />
<script src="//"></script>
<script src="//"></script>
<script src="//"></script>
<script src="//"></script>
var helloKendo = angular.module( "helloKendo", ["kendo.directives"] );
helloKendo.controller( "HelloCtrl", ['$scope', function( $scope ){
$scope.firstname = "Calvin Hobbes";
$scope.countries = {
dataSource: new{
data: [ "Afganistan", "India", "Ireland", "Nepal", "Pakistan", "Sri Lanka", "UK", "USA" ]
optionLabel: "Select A Country",
change: function(e) {
<body ng-controller="HelloCtrl">
<div class="container">
<div class="page-header" style="margin: 0">
<!-- Remove two backslash in front of { -->
<h1>Hello, \{\{firstname }}</h1>
<div class="k-content" style="padding:20px">
<form class="form-horizontal">
<div class="form-group">
<label for="firstname" class="col-md-2 control-label">Type your name:</label>
<div class="col-md-4">
<input id="firstname" name="firstname" class="k-textbox col-md-6" ng-model="firstname" required/>
<div class="form-group">
<label for="country" class="col-md-2 control-label">Your Country:</label>
<div class="col-md-4">
<select id="country" kendo-drop-down-list k-options="countries"></select>