Instant Search and Order with AngularJS

HTML

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

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

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

  <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>Selectize theme:</p>
  <ui-select ng-model="person.selected" theme="selectize" 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>
  </ui-select>

  <script>
    angular.module('DemoApp', ['ui.select'])
      .config(function(uiSelectConfig) {
        // uiSelectConfig.defaultTheme = 'select2';
        // uiSelectConfig.defaultTheme = 'selectize';
      })
      .controller('MainCtrl', ['$scope', function ($scope) {
        $scope.person = {};
        $scope.people = [
          { name: 'Wladimir Coka',   email: '[email protected]' },
          { name: 'Samantha Smith',  email: '[email protected]' },
          { name: 'EstefanĂ­a Smith', email: '[email protected]' },
          { name: 'Natasha Jones',   email:...

JavaScript

'use strict';

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) {
      scope.open = false;
      scope.$select = {}; // Namespace

      var uiSelectCtrl = controllers[0];
      var ngModelCtrl = controllers[1];

      scope.$watch('$select.selected', function(newVal, oldVal) {
        if (ngModelCtrl.$viewValue != newVal) ngModelCtrl.$setViewValue(newVal);
      });

      ngModelCtrl.$render = function() {
        scope.$select.selected = ngModelCtrl.$viewValue;
      };

     ...