AngularJS ui-select demo

See https://github.com/angular-ui/ui-select

HTML

<!DOCTYPE html>
<html lang="en" ng-app="DemoApp">
<head>
  <meta charset="utf-8">
  <title>AngularJS ui-select</title>

  <!--
    IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
    For Firefox 3.6, you will need to include jQuery
  -->
  <!--[if lt IE 9]>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script>
    <script>
      document.createElement('ui-select');
      document.createElement('match');
      document.createElement('choices');
    </script>
  <![endif]-->

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>

  <script src="select.js"></script>

  <!-- Select2 theme -->
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">

  <!--
    Selectize theme
    Less versions are available at https://github.com/brianreavis/selectize.js/tree/master/dist/less
  -->
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
  <!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap2.css"> -->
  <!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css"> -->

  <style>
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #333;
    }
  </style>
</head>

<body ng-controller="MainCtrl">
  <p>Selected: {{person.selected.name}}</p>

  <p>Select2 theme (default):</p>
  <ui-select ng-model="person.selected" style="width: 300px;">
    <match placeholder="Pick one...">{{$select.selected.name}}</match>
    <choices data="people | filter: $select.search">
      <div ng-bind-html="trustAsHtml((item.name | highlight:$select.search))"></div>
      <div>{{item.email}}</div>
    </choices>
...

JavaScript

'use strict';

/**
 * Add querySelectorAll() to jqLite.
 *
 * jqLite find() is limited to lookups by tag name.
 * TODO This will change with AngularJS 1.3, to be removed when this happens
 *
 * See jqLite.find - why not use querySelectorAll? https://github.com/angular/angular.js/issues/3586
 * See feat(jqLite): use querySelectorAll instead of getElementsByTagName in jqLite.find https://github.com/angular/angular.js/pull/3598
 */
if (angular.element.prototype.querySelectorAll === undefined) {
  angular.element.prototype.querySelectorAll = function(selector) {
    return angular.element(this[0].querySelectorAll(selector));
  }
}

angular.module('ui.select', [])

.constant('uiSelectConfig', {
  defaultTheme: 'select2',
  defaultPlaceholder: 'Select Item'
})

.directive('uiSelect', function($document, $timeout, uiSelectConfig) {
  return {
    restrict: 'E',
    templateUrl: function(tElement, tAttrs) {
      var theme = tAttrs.theme || uiSelectConfig.defaultTheme;
      return theme + '/select.html';
    },
    replace: true,
    require: ['uiSelect', 'ngModel'],
    transclude: true,
    scope: true,
    controllerAs: 'uiSelectCtrl',

    controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
      var ctrl = this;

      this.activate = function($event) {
        if ($event) $event.stopPropagation(); // Prevent bubbling
        $scope.open = true;
        // Give it time to appear before focus
        $timeout(function() {
          ctrl.input[0].focus();
        });
      };

      this.select = function(item) {
        $scope.$select.selected = item;
        this.close();
        // Using a watch instead of $scope.ngModel.$setViewValue(item)
      };

      this.close = function() {
        $scope.open = false;
        $scope.$select.search = "";
      };

      this.input = $element.find('input'); // TODO could break if input is at other template
    }],

    link: function(scope, element, attrs, controllers, transcludeFn) {
     ...