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

  <head>
    <!-- Jquery/Angularjs -->
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="angular.js@1.2.20" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular.js"></script>
    
    <!-- Kendo -->
    <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.aspnetmvc.min.js"></script>
    
    <!-- Kendo CSS -->
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common-bootstrap.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.bootstrap.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.bootstrap.min.css" rel="stylesheet" />
    

    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="controller">
    <select 
      id="github" 
      multiple="multiple" 
      kendo-multi-select="kGitHub" 
      k-options="gitHubOptions"
      name="github" 
      data-k-ng-model="selected"></select>
      
      <h2>Selected: {{selected}}</h2>
  </body>

</html>

angular
  .module("app", ["kendo.directives"])
  .service("service", function($http) {
    this.getRepos = function() {
      return $http.get("https://api.github.com/users/ghorsey/repos");
    };
  })
  .controller("controller", function($scope, service) {
    $scope.gitHubOptions = {
      index: 0,
      minLength: 1,
      autoBind: true,
      filter: "contains",
      "placeholder": "Search GitHub...",
      "suggest": true,
      dataValueField: "html_url",
      dataTextField: "full_name",
      dataSource: {
        transport: {
          read: function(options) {
            service.getRepos().success(function(result) {
              options.success(result);
            }).error(function(data) {
              options.error(data);
            });
          }
        }
      }
    };
  });
/* Styles go here */