From be17675feedcd3d9321a0290d01d07f4563135c9 Mon Sep 17 00:00:00 2001
From: Jakob Krigovsky <jakob.krigovsky@gmail.com>
Date: Sat, 15 Nov 2014 15:24:51 +0100
Subject: [PATCH 01/14] =?UTF-8?q?Add=20=E2=80=98minimumInputLength?=
 =?UTF-8?q?=E2=80=99=20configuration=20option?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/select.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/select.js b/src/select.js
index 7b34c650a..b6e6e227f 100644
--- a/src/select.js
+++ b/src/select.js
@@ -68,7 +68,8 @@
     searchEnabled: true,
     placeholder: '', // Empty by default, like HTML tag <select>
     refreshDelay: 1000, // In milliseconds
-    closeOnSelect: true
+    closeOnSelect: true,
+    minimumInputLength: 0
   })
 
   // See Rename minErr and make it accessible from outside https://github.com/angular/angular.js/issues/6913
@@ -163,6 +164,7 @@
     ctrl.lockChoiceExpression = undefined; // Initialized inside uiSelect directive link function
     ctrl.closeOnSelect = true; // Initialized inside uiSelect directive link function
     ctrl.clickTriggeredSelect = false;
+    ctrl.minimumInputLength = undefined; // Initialized inside uiSelect directive link function
 
     ctrl.isEmpty = function() {
       return angular.isUndefined(ctrl.selected) || ctrl.selected === null || ctrl.selected === '';
@@ -785,6 +787,11 @@
             $select.searchEnabled = searchEnabled !== undefined ? searchEnabled : uiSelectConfig.searchEnabled;
         });
 
+        scope.$watch('minimumInputLength', function() {
+          var minimumInputLength = scope.$eval(attrs.minimumInputLength);
+          $select.minimumInputLength = minimumInputLength !== undefined ? minimumInputLength : uiSelectConfig.minimumInputLength;
+        });
+
         attrs.$observe('disabled', function() {
           // No need to use $eval() (thanks to ng-disabled) since we already get a boolean instead of a string
           $select.disabled = attrs.disabled !== undefined ? attrs.disabled : false;

From fc9bc49b1108c4225ffd84895f992238e60c4f4a Mon Sep 17 00:00:00 2001
From: Jakob Krigovsky <jakob.krigovsky@gmail.com>
Date: Sat, 15 Nov 2014 16:07:37 +0100
Subject: [PATCH 02/14] Only show results if minimum input length is reached

---
 src/select.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/select.js b/src/select.js
index b6e6e227f..091c8f2b4 100644
--- a/src/select.js
+++ b/src/select.js
@@ -244,7 +244,7 @@
       // See https://github.com/angular/angular.js/blob/v1.2.15/src/ng/directive/ngRepeat.js#L259
       $scope.$watchCollection(ctrl.parserResult.source, function(items) {
 
-        if (items === undefined || items === null) {
+        if (items === undefined || items === null || ctrl.search.length < ctrl.minimumInputLength) {
           // If the user specifies undefined or null => reset the collection
           // Special case: items can be undefined if the user did not initialized the collection on the scope
           // i.e $scope.addresses = [] is missing

From d73f1f2699b4d00871fcc01188002b56b7b2b889 Mon Sep 17 00:00:00 2001
From: Jakob Krigovsky <jakob.krigovsky@gmail.com>
Date: Sat, 15 Nov 2014 16:16:09 +0100
Subject: [PATCH 03/14] Only call refresh function if minimum input length is
 reached

---
 src/select.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/select.js b/src/select.js
index 091c8f2b4..b9c6ea818 100644
--- a/src/select.js
+++ b/src/select.js
@@ -941,7 +941,9 @@
           scope.$watch('$select.search', function(newValue) {
             if(newValue && !$select.open && $select.multiple) $select.activate(false, true);
             $select.activeIndex = 0;
-            $select.refresh(attrs.refresh);
+            if ($select.search.length >= $select.minimumInputLength) {
+              $select.refresh(attrs.refresh);
+            }
           });
 
           attrs.$observe('refreshDelay', function() {

From 864f653793d77538934f8090aeb2f096f3a5fd62 Mon Sep 17 00:00:00 2001
From: Jakob Krigovsky <jakob.krigovsky@gmail.com>
Date: Sat, 15 Nov 2014 16:17:34 +0100
Subject: [PATCH 04/14] Clear results if input is below minimum input length

---
 src/select.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/select.js b/src/select.js
index b9c6ea818..a0aca6d06 100644
--- a/src/select.js
+++ b/src/select.js
@@ -943,6 +943,8 @@
             $select.activeIndex = 0;
             if ($select.search.length >= $select.minimumInputLength) {
               $select.refresh(attrs.refresh);
+            } else {
+              $select.items = [];
             }
           });
 

From e1a1ffc679f98f8a364c25e4a830f817e6082249 Mon Sep 17 00:00:00 2001
From: Jakob Krigovsky <jakob.krigovsky@gmail.com>
Date: Sat, 15 Nov 2014 16:20:03 +0100
Subject: [PATCH 05/14] Add minimum input notice to Select2 theme

---
 src/select2/choices.tpl.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/select2/choices.tpl.html b/src/select2/choices.tpl.html
index a965148be..2ed04b27c 100644
--- a/src/select2/choices.tpl.html
+++ b/src/select2/choices.tpl.html
@@ -7,4 +7,7 @@
       </li>
     </ul>
   </li>
+  <li class="ui-select-input-too-short select2-no-results" ng-show="$select.items.length == 0 && $select.search.length < $select.minimumInputLength">
+    Please enter {{$select.minimumInputLength - $select.search.length}} or more characters
+  </li>
 </ul>
\ No newline at end of file

From 89462fd5121a9af263c914052116342bd4300341 Mon Sep 17 00:00:00 2001
From: Jakob Krigovsky <jakob.krigovsky@gmail.com>
Date: Sat, 15 Nov 2014 16:23:11 +0100
Subject: [PATCH 06/14] Add minimum input notice to Bootstrap theme

---
 src/bootstrap/choices.tpl.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/bootstrap/choices.tpl.html b/src/bootstrap/choices.tpl.html
index a9a1eee3a..01e786892 100644
--- a/src/bootstrap/choices.tpl.html
+++ b/src/bootstrap/choices.tpl.html
@@ -1,6 +1,6 @@
 <ul class="ui-select-choices ui-select-choices-content dropdown-menu"
     role="menu" aria-labelledby="dLabel"
-    ng-show="$select.items.length > 0">
+    ng-show="$select.items.length > 0 || $select.search.length < $select.minimumInputLength">
   <li class="ui-select-choices-group">
     <div class="divider" ng-show="$select.isGrouped && $index > 0"></div>
     <div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header" ng-bind-html="$group.name"></div>
@@ -8,4 +8,7 @@
       <a href="javascript:void(0)" class="ui-select-choices-row-inner"></a>
     </div>
   </li>
+  <li class="ui-select-input-too-short" ng-show="$select.items.length == 0 && $select.search.length < $select.minimumInputLength">
+    Please enter {{$select.minimumInputLength - $select.search.length}} or more characters
+  </li>
 </ul>

From b69915c54c3c031bf109aacf5878e2b7ef8ffd99 Mon Sep 17 00:00:00 2001
From: Jakob Krigovsky <jakob.krigovsky@gmail.com>
Date: Sat, 15 Nov 2014 16:24:10 +0100
Subject: [PATCH 07/14] Style minimum input notice in Bootstrap theme the same
 as other results

---
 src/select.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/select.css b/src/select.css
index 519dfd99a..d635b5f74 100644
--- a/src/select.css
+++ b/src/select.css
@@ -121,7 +121,7 @@
   outline: 0;
 }
 
-.ui-select-bootstrap .ui-select-choices-row>a {
+.ui-select-bootstrap .ui-select-choices-row>a, .ui-select-bootstrap .ui-select-input-too-short {
     display: block;
     padding: 3px 20px;
     clear: both;

From 893257544f6992a9a9d76685e5dbd15e8040d2b5 Mon Sep 17 00:00:00 2001
From: Jakob Krigovsky <jakob.krigovsky@gmail.com>
Date: Sat, 15 Nov 2014 16:31:39 +0100
Subject: [PATCH 08/14] Add minimum input notice to Selectize theme

---
 src/selectize/choices.tpl.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/selectize/choices.tpl.html b/src/selectize/choices.tpl.html
index e89322a34..462abbfb8 100644
--- a/src/selectize/choices.tpl.html
+++ b/src/selectize/choices.tpl.html
@@ -6,5 +6,8 @@
         <div class="option ui-select-choices-row-inner" data-selectable></div>
       </div>
     </div>
+    <div class="ui-select-input-too-short" ng-show="$select.items.length == 0 && $select.search.length < $select.minimumInputLength">
+      Please enter {{$select.minimumInputLength - $select.search.length}} or more characters
+    </div>
   </div>
 </div>

From f45282577b55c6e9ca0458070ce299d355303cb4 Mon Sep 17 00:00:00 2001
From: Jakob Krigovsky <jakob.krigovsky@gmail.com>
Date: Sat, 15 Nov 2014 16:32:15 +0100
Subject: [PATCH 09/14] Style minimum input notice in Selectize theme the same
 as other results

---
 src/select.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/select.css b/src/select.css
index d635b5f74..aaf44a56f 100644
--- a/src/select.css
+++ b/src/select.css
@@ -54,6 +54,11 @@
     border-color: #D44950;
 }
 
+.selectize-dropdown-content > .ui-select-input-too-short {
+  padding: 5px 8px;
+  overflow: hidden;
+}
+
 
 /* Bootstrap theme */
 

From 99ec151702d482b824afcd9e056ec41e591d0e24 Mon Sep 17 00:00:00 2001
From: Jakob Krigovsky <jakob.krigovsky@gmail.com>
Date: Sat, 15 Nov 2014 16:45:38 +0100
Subject: [PATCH 10/14] Add tests for minimumInputLength option

---
 test/select.spec.js | 46 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/test/select.spec.js b/test/select.spec.js
index f76c7fec8..a295a1a1a 100644
--- a/test/select.spec.js
+++ b/test/select.spec.js
@@ -1597,5 +1597,51 @@ describe('ui-select tests', function() {
 
     });
 
+    describe('minimumInputLength option', function() {
+
+      function setupWithoutAttr(){
+        return compileTemplate(
+          '<ui-select ng-model="selection.selected"> \
+            <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
+            <ui-select-choices repeat="person in people | filter: $select.search"> \
+              <div ng-bind-html="person.name | highlight: $select.search"></div> \
+              <div ng-bind-html="person.email | highlight: $select.search"></div> \
+            </ui-select-choices> \
+          </ui-select>'
+        );
+      }
+
+      function setupWithAttr(minimumInputLength){
+        return compileTemplate(
+          '<ui-select ng-model="selection.selected" minimum-input-length="'+minimumInputLength+'"> \
+            <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
+            <ui-select-choices repeat="person in people | filter: $select.search"> \
+              <div ng-bind-html="person.name | highlight: $select.search"></div> \
+              <div ng-bind-html="person.email | highlight: $select.search"></div> \
+            </ui-select-choices> \
+          </ui-select>'
+        );
+      }
+
+      it('should be 0 by default', function(){
+        var el = setupWithoutAttr();
+        expect(el.scope().$select.minimumInputLength).toBe(0);
+      });
+
+      it('should set minimum input length if default is set', function(){
+        var uiSelectConfig = $injector.get('uiSelectConfig');
+        uiSelectConfig.minimumInputLength = 2;
+
+        var el = setupWithoutAttr();
+        expect(el.scope().$select.minimumInputLength).not.toBe(0);
+      });
+
+      it('should be overridden by inline option minimum-input-length=2', function(){
+        var el = setupWithAttr(2);
+        expect(el.scope().$select.minimumInputLength).toBe(2);
+      });
+
+    });    
+
   });
 });

From 09d79f1375f2fcffd35b7efd56d0dac5924987b3 Mon Sep 17 00:00:00 2001
From: Jakob Krigovsky <jakob.krigovsky@gmail.com>
Date: Sat, 15 Nov 2014 19:58:44 +0100
Subject: [PATCH 11/14] =?UTF-8?q?Add=20=E2=80=98countChoices=E2=80=99=20te?=
 =?UTF-8?q?st=20helper?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/select.spec.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/test/select.spec.js b/test/select.spec.js
index a295a1a1a..506e0afe8 100644
--- a/test/select.spec.js
+++ b/test/select.spec.js
@@ -126,6 +126,15 @@ describe('ui-select tests', function() {
     scope.$digest();
   };
 
+  function countChoices(el) {
+
+    if (!isDropdownOpened(el)){
+      openDropdown(el);
+    }
+
+    return $(el).find('.ui-select-choices-row').length;
+  }
+
 
   // Tests
 

From be4112c0b2e6137eaabcdbd403dc067d60216344 Mon Sep 17 00:00:00 2001
From: Jakob Krigovsky <jakob.krigovsky@gmail.com>
Date: Sat, 15 Nov 2014 19:59:20 +0100
Subject: [PATCH 12/14] Add tests for minimum input feature

---
 test/select.spec.js | 100 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)

diff --git a/test/select.spec.js b/test/select.spec.js
index 506e0afe8..8728b6d5c 100644
--- a/test/select.spec.js
+++ b/test/select.spec.js
@@ -1547,6 +1547,106 @@ describe('ui-select tests', function() {
     });
   });
 
+  describe('minimum-input-length option', function() {
+
+    var el;
+
+    function setupSelectComponent(minimumInputLength, theme) {
+      el = compileTemplate(
+        '<ui-select ng-model="selection.selected" theme="' + theme + '" minimum-input-length="' + minimumInputLength + '"> \
+          <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
+          <ui-select-choices repeat="person in people | filter: $select.search"> \
+            <div ng-bind-html="person.name | highlight: $select.search"></div> \
+            <div ng-bind-html="person.email | highlight: $select.search"></div> \
+          </ui-select-choices> \
+        </ui-select>'
+      );
+    }
+
+    it('should show minimum input notice when > 0 and dropdown is open', function() {
+      setupSelectComponent(2, 'select2');
+      openDropdown(el);
+      expect($(el).find('.ui-select-input-too-short')).not.toHaveClass('ng-hide');
+    });
+
+    it('should hide minimum input notice when 0 and dropdown is open', function() {
+      setupSelectComponent(0, 'select2');
+      openDropdown(el);
+      expect($(el).find('.ui-select-input-too-short')).toHaveClass('ng-hide');
+    });
+
+    it('should show items when minimum input length has been reached', function() {
+      setupSelectComponent(2, 'select2');
+      openDropdown(el);
+      setSearchText(el, 'Ad');
+      expect(countChoices(el)).toBe(3);
+    });
+
+    it('should hide items if minimum input length has not been reached', function() {
+      setupSelectComponent(4, 'select2');
+      openDropdown(el);
+      setSearchText(el, 'Ad');
+      expect(countChoices(el)).toBe(0);
+    });
+
+    it('should call the refresh function if minimum input length has been reached', function() {
+      el = compileTemplate(
+        '<ui-select ng-model="selection.selected" minimum-input-length="2"> \
+          <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
+          <ui-select-choices repeat="person in people | filter: $select.search" \
+            refresh="fetchFromServer($select.search)" refresh-delay="0"> \
+            <div ng-bind-html="person.name | highlight: $select.search"></div> \
+            <div ng-bind-html="person.email | highlight: $select.search"></div> \
+          </ui-select-choices> \
+        </ui-select>'
+      );
+
+      scope.fetchFromServer = function(){};
+
+      spyOn(scope, 'fetchFromServer');
+
+      el.scope().$select.search = 'ra';
+      scope.$digest();
+      $timeout.flush();
+
+      expect(scope.fetchFromServer).toHaveBeenCalled();
+    });
+
+    it('should not call the refresh function if minimum input length has not been reached', function() {
+      el = compileTemplate(
+        '<ui-select ng-model="selection.selected" minimum-input-length="2"> \
+          <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
+          <ui-select-choices repeat="person in people | filter: $select.search" \
+            refresh="fetchFromServer($select.search)" refresh-delay="0"> \
+            <div ng-bind-html="person.name | highlight: $select.search"></div> \
+            <div ng-bind-html="person.email | highlight: $select.search"></div> \
+          </ui-select-choices> \
+        </ui-select>'
+      );
+
+      scope.fetchFromServer = function(){};
+
+      spyOn(scope, 'fetchFromServer');
+
+      el.scope().$select.search = 'r';
+      scope.$digest();
+      $timeout.flush();
+
+      expect(scope.fetchFromServer).not.toHaveBeenCalled();
+    });
+
+    it('should clear items if input falls below minimum input length', function() {
+      setupSelectComponent(2, 'select2');
+      openDropdown(el);
+      setSearchText(el, 'Ad');
+      // Make sure there is always something to flush for $timeout.flush()
+      $timeout(function(){});
+      setSearchText(el, 'A');
+      expect(countChoices(el)).toBe(0);
+    });
+
+  });
+
   describe('default configuration via uiSelectConfig', function() {
 
     describe('searchEnabled option', function() {

From cd0ccb795073b9fada331d79db00468f50de6d9e Mon Sep 17 00:00:00 2001
From: Jakob Krigovsky <jakob.krigovsky@gmail.com>
Date: Sat, 15 Nov 2014 19:59:45 +0100
Subject: [PATCH 13/14] Add minimum input tests for every theme

---
 test/select.spec.js | 48 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/test/select.spec.js b/test/select.spec.js
index 8728b6d5c..08dcc1d1a 100644
--- a/test/select.spec.js
+++ b/test/select.spec.js
@@ -1645,6 +1645,54 @@ describe('ui-select tests', function() {
       expect(countChoices(el)).toBe(0);
     });
 
+    describe('selectize theme', function() {
+
+      it('should show minimum input notice when > 0 and dropdown is open', function() {
+        setupSelectComponent(2, 'selectize');
+        openDropdown(el);
+        expect($(el).find('.ui-select-input-too-short')).not.toHaveClass('ng-hide');
+      });
+
+      it('should hide minimum input notice when 0 and dropdown is open', function() {
+        setupSelectComponent(0, 'selectize');
+        openDropdown(el);
+        expect($(el).find('.ui-select-input-too-short')).toHaveClass('ng-hide');
+      });
+
+    });
+
+    describe('select2 theme', function() {
+
+      it('should show minimum input notice when > 0 and dropdown is open', function() {
+        setupSelectComponent(2, 'select2');
+        openDropdown(el);
+        expect($(el).find('.ui-select-input-too-short')).not.toHaveClass('ng-hide');
+      });
+
+      it('should hide minimum input notice when 0 and dropdown is open', function() {
+        setupSelectComponent(0, 'select2');
+        openDropdown(el);
+        expect($(el).find('.ui-select-input-too-short')).toHaveClass('ng-hide');
+      });
+
+    });
+
+    describe('bootstrap theme', function() {
+
+      it('should show minimum input notice when > 0 and dropdown is open', function() {
+        setupSelectComponent(2, 'bootstrap');
+        openDropdown(el);
+        expect($(el).find('.ui-select-input-too-short')).not.toHaveClass('ng-hide');
+      });
+
+      it('should hide minimum input notice when 0 and dropdown is open', function() {
+        setupSelectComponent(0, 'bootstrap');
+        openDropdown(el);
+        expect($(el).find('.ui-select-input-too-short')).toHaveClass('ng-hide');
+      });
+
+    });
+
   });
 
   describe('default configuration via uiSelectConfig', function() {

From 9f0afa45383c4edf5a9515599f5ae8cdd47ccbb3 Mon Sep 17 00:00:00 2001
From: Jakob Krigovsky <jakob.krigovsky@gmail.com>
Date: Sat, 15 Nov 2014 20:01:56 +0100
Subject: [PATCH 14/14] Add demo page for minimum input feature

---
 examples/demo-minimum-input.html | 88 ++++++++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 examples/demo-minimum-input.html

diff --git a/examples/demo-minimum-input.html b/examples/demo-minimum-input.html
new file mode 100644
index 000000000..cb819386f
--- /dev/null
+++ b/examples/demo-minimum-input.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en" ng-app="demo">
+<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 also need to include jQuery and ECMAScript 5 shim
+  -->
+  <!--[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('ui-select-match');
+      document.createElement('ui-select-choices');
+    </script>
+  <![endif]-->
+
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
+  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
+
+  <!-- ui-select files -->
+  <script src="../dist/select.js"></script>
+  <link rel="stylesheet" href="../dist/select.css">
+
+  <script src="demo.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 {
+      padding: 15px;
+    }
+
+    .select2 > .select2-choice.ui-select-match {
+      /* Because of the inclusion of Bootstrap */
+      height: 29px;
+    }
+
+    .selectize-control > .selectize-dropdown {
+      top: 36px;
+    }
+  </style>
+</head>
+
+<body ng-controller="DemoCtrl">
+  <script src="demo.js"></script>
+
+  <button class="btn btn-default btn-xs" ng-click="enable()">Enable ui-select</button>
+  <button class="btn btn-default btn-xs" ng-click="disable()">Disable ui-select</button>
+  <button class="btn btn-default btn-xs" ng-click="clear()">Clear ng-model</button>
+
+  <h3>Select2 theme</h3>
+  <p>Selected: {{person.selected}}</p>
+  <ui-select ng-model="person.selected" theme="select2" minimum-input-length="2" ng-disabled="disabled" style="min-width: 300px;">
+    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
+    <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
+      <div ng-bind-html="person.name | highlight: $select.search"></div>
+      <small>
+        email: {{person.email}}
+        age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
+      </small>
+    </ui-select-choices>
+  </ui-select>
+
+  <h3>Selectize theme</h3>
+  <p>Selected: {{country.selected}}</p>
+  <ui-select ng-model="country.selected" theme="selectize" minimum-input-length="2" ng-disabled="disabled" style="width: 300px;">
+    <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
+    <ui-select-choices repeat="country in countries | filter: $select.search">
+      <span ng-bind-html="country.name | highlight: $select.search"></span>
+      <small ng-bind-html="country.code | highlight: $select.search"></small>
+    </ui-select-choices>
+  </ui-select>
+</body>
+</html>