From c0169847e2893c501c712bd8e1c90c73a550bd0e Mon Sep 17 00:00:00 2001
From: dimirc <wlacoka@gmail.com>
Date: Sun, 17 Nov 2013 23:57:37 -0500
Subject: [PATCH 01/10] Separate templates on theme

---
 demo/index.html                 |   4 +-
 src/select.js                   |  84 ++++++---------
 src/select2/choices.tpl.html    |   5 +
 src/select2/match.tpl.html      |   5 +
 src/select2/select.tpl.html     |   9 ++
 src/{ => select2}/select2.css   | 176 ++++++++++++++++----------------
 src/{ => select2}/select2.png   | Bin
 src/{ => select2}/select2x2.png | Bin
 8 files changed, 143 insertions(+), 140 deletions(-)
 create mode 100644 src/select2/choices.tpl.html
 create mode 100644 src/select2/match.tpl.html
 create mode 100644 src/select2/select.tpl.html
 rename src/{ => select2}/select2.css (69%)
 rename src/{ => select2}/select2.png (100%)
 rename src/{ => select2}/select2x2.png (100%)

diff --git a/demo/index.html b/demo/index.html
index 514b1d6df..f2bfb1119 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -12,8 +12,10 @@
     <script src="../src/select.js"></script>
     <script src="demo.js"></script>
 
+    <!-- Select2 Theme -->
+    <link rel="stylesheet" href="../src/select2/select2.css"/>
+
     <!-- <link rel="stylesheet" href="../src/select.css"/> -->
-    <link rel="stylesheet" href="../src/select2.css"/>
     
     <style>
         body {
diff --git a/src/select.js b/src/select.js
index 9d9417b61..3c2d4eabe 100644
--- a/src/select.js
+++ b/src/select.js
@@ -1,17 +1,18 @@
-angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($document,$timeout){
+angular.module('ui.select', ['ui.keypress'])
+
+.constant('uiSelectConfig', {
+  defaultTheme: 'select2',
+  defaultPlaceholder: 'Select Item',
+})
+
+.directive('uiSelect', function($document,$timeout,uiSelectConfig){
   return {
     restrict: 'E',
     /* jshint multistr: true */
-    template:
-    '<div class="ui-select-container" ng-class="{\'ui-select-container-active ui-select-dropdown-open\':open}"> \
-      <a class="ui-select-choice"></a> \
-      <div ng-class="{\'ui-select-display-none\':!open}" class="ui-select-drop ui-select-with-searchbox ui-select-drop-active"> \
-        <div class="ui-select-search"> \
-          <input class="ui-select-input" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" ui-keydown="{up: \'up()\', down: \'down()\', esc: \'close()\', enter: \'$select((data.items|filter: $select.search)[$select.index])\'}" ng-model="$select.search"> \
-        </div> \
-        <ul class="ui-select-results" /> \
-      </div> \
-    </div>',
+    templateUrl: function(tElement, tAttrs) {
+      var theme = tAttrs.theme || uiSelectConfig.defaultTheme;
+      return '../src/' + theme + '/select.tpl.html';
+    },
     replace: true,
     require: 'ngModel',
     transclude: true,
@@ -20,11 +21,6 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc
       return function($scope, $elm, $attrs, ngModel){
         transcludeFn($scope, function(clone) {
           $scope.open = false;
-          //Helper functions (no jQuery)
-          var hasClass = function (elem, klass) {
-            if (!elem) return;
-            return (" " + elem.className + " " ).indexOf( " "+klass+" " ) > -1;
-          };
           var getElementsByClassName = (function() {
             //To support IE8
             return document.getElementsByClassdName ?
@@ -38,13 +34,14 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc
 
           //Set transcluded elements to their correct position on template
           var transcluded = angular.element('<div/>').append(clone);
-          var transChoices = getElementsByClassName(transcluded[0],'ui-select-results');
-          var transMatch = getElementsByClassName(transcluded[0],'ui-select-choice');
-          getElementsByClassName($elm[0],'ui-select-results').replaceWith(transChoices[0]);
-          getElementsByClassName($elm[0],'ui-select-choice').replaceWith(transMatch[0]);
+          var transMatch = getElementsByClassName(transcluded[0],'ui-select-match');
+          var transChoices = getElementsByClassName(transcluded[0],'ui-select-choices');
+          getElementsByClassName($elm[0],'ui-select-match').replaceWith(transMatch);
+          getElementsByClassName($elm[0],'ui-select-choices').replaceWith(transChoices);
 
           var input = $elm.find('input');
-          $scope.activate = function(){
+          $scope.activate = function($event){
+            if ($event) $event.stopPropagation(); // Prevent bubbling
             $scope.open = true;
             //Give it time to appear before focus
             $timeout(function(){
@@ -79,45 +76,33 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc
             $scope.open = false;
             $scope.$select.search = "";
           };
-          var choiceArrow = getElementsByClassName(tElement[0],'ui-select-arrow');
-          var searchDiv = getElementsByClassName(tElement[0],'ui-select-search');
           var dismissClickHandler = function (evt) {
-            if (
-              hasClass(evt.target,'ui-select-choice') || //Chosen label for selection
-              hasClass(evt.target.parentElement,'ui-select-choice') || //No selection (Placeholder)
-              choiceArrow[0] === evt.target.parentElement ||
-              searchDiv[0] === evt.target.parentElement) {
+            if (angular.element(evt.target).hasClass('ui-select-search')){
               return;
             }
             $scope.close();
             $scope.$digest();
           };
           $document.bind('click', dismissClickHandler);
-          ngModel.$render = function(){
-            //$scope.$select.search = ngModel.$viewValue;
-          };
         });
       };
     }
   };
 })
 
-.directive('choices', function($sce) {
+.directive('choices', function($sce,uiSelectConfig) {
   return {
     // require: '^uiSelect',
     restrict: 'E',
     transclude: true,
     replace: true,
-    template:
-      '<ul class="ui-select-results">' +
-      '<li ng-class="{\'ui-select-highlighted\':$select.index==$index}"' +
-      ' ng-click="$select(item)"' +
-      ' ng-mousemove="$select.index=$index"' +
-      ' ng-repeat="empty">' +
-      ' <div class="ui-select-result-label" ng-transclude></div>' +
-      '</li></ul>',
+    templateUrl: function(tElement, tAttrs) {
+      //Gets theme atribute from parent (ui-select)
+      var theme = tElement[0].parentElement.getAttribute('theme') || uiSelectConfig.defaultTheme;
+      return '../src/' + theme + '/choices.tpl.html';
+    },
     compile: function(tElement, tAttrs, transcludeFn) {
-      tElement[0].children[0].setAttribute("ng-repeat", tAttrs.data);
+      tElement.find("li").attr("ng-repeat", tAttrs.data);
       return function(scope, element, attrs){
         scope.trustAsHtml = function(value) {
           return $sce.trustAsHtml(value);
@@ -138,23 +123,20 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc
   };
 })
 
-.directive('match', function($compile) {
+.directive('match', function($compile,uiSelectConfig) {
   return {
     restrict: 'E',
     transclude: true,
     replace: true,
-    /* jshint multistr: true */
-    template:
-      '<a href="javascript:void(0)" class="ui-select-choice" ng-click="activate()"> \
-        <span class="ui-select-arrow"><b></b></span> \
-        <span class="select2-chosen">{{selectedLabel}}</span> \
-      </a>',
+    templateUrl: function(tElement, tAttrs) {
+      //Gets theme atribute from parent (ui-select)
+      var theme = tElement[0].parentElement.getAttribute('theme') || uiSelectConfig.defaultTheme;
+      return '../src/' + theme + '/match.tpl.html';
+    },
     compile: function(tElement, tAttrs, transcludeFn) {
       return function($scope, $elm, $attrs, ngModel){
         transcludeFn($scope, function(clone) {
-          var labelWrap = angular.element("<div ng-hide='$select.selected'>" + tAttrs.placeholder + "</div>");
-          var labelWrapCompiled = $compile(labelWrap)($scope);
-          $elm.append(labelWrapCompiled);
+          $scope.placeholder = tAttrs.placeholder || uiSelectConfig.defaultPlaceholder;
           $elm.append(clone);
         });
       };
diff --git a/src/select2/choices.tpl.html b/src/select2/choices.tpl.html
new file mode 100644
index 000000000..acf335ff2
--- /dev/null
+++ b/src/select2/choices.tpl.html
@@ -0,0 +1,5 @@
+<ul class="ui-select-choices select2-results">
+  <li ng-class="{'select2-highlighted':$select.index==$index}" ng-click="$select(item)" ng-mousemove="$select.index=$index">
+    <div class="select2-result-label" ng-transclude></div>
+  </li>
+</ul>
\ No newline at end of file
diff --git a/src/select2/match.tpl.html b/src/select2/match.tpl.html
new file mode 100644
index 000000000..a0cc040db
--- /dev/null
+++ b/src/select2/match.tpl.html
@@ -0,0 +1,5 @@
+<a href="javascript:void(0)" class="ui-select-match select2-choice" ng-click="activate($event)">
+  <span class="select2-arrow"><b></b></span>
+  <span class="select2-chosen">{{selectedLabel}}</span>
+	<div ng-hide='$select.selected'>{{placeholder}}</div>
+</a>
\ No newline at end of file
diff --git a/src/select2/select.tpl.html b/src/select2/select.tpl.html
new file mode 100644
index 000000000..944e03be1
--- /dev/null
+++ b/src/select2/select.tpl.html
@@ -0,0 +1,9 @@
+<div class="select2-container" ng-class="{'select2-container-active select2-dropdown-open':open}">
+  <div class="ui-select-match"></div>
+  <div ng-class="{'select2-display-none':!open}" class="select2-drop select2-with-searchbox select2-drop-active">
+    <div class="select2-search">
+      <input class="ui-select-search select2-input" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" ui-keydown="{up:'up()', down:'down()', esc:'close()', enter:'$select((data.items|filter: $select.search)[$select.index])'}" ng-model="$select.search">
+    </div>
+    <div class="ui-select-choices" />
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/select2.css b/src/select2/select2.css
similarity index 69%
rename from src/select2.css
rename to src/select2/select2.css
index ce4156dcf..f7ec57ff5 100644
--- a/src/select2.css
+++ b/src/select2/select2.css
@@ -2,7 +2,7 @@
 Based on https://github.com/ivaynberg/select2/blob/master/select2.css
 */
 
-.ui-select-container {
+.select2-container {
     margin: 0;
     position: relative;
     display: inline-block;
@@ -12,10 +12,10 @@ Based on https://github.com/ivaynberg/select2/blob/master/select2.css
     vertical-align: middle;
 }
 
-.ui-select-container,
-.ui-select-drop,
-.ui-select-search,
-.ui-select-search input {
+.select2-container,
+.select2-drop,
+.select2-search,
+.select2-search input {
   /*
     Force border-box so that % widths fit the parent
     container without overlap because of margin/padding.
@@ -26,7 +26,7 @@ Based on https://github.com/ivaynberg/select2/blob/master/select2.css
           box-sizing: border-box; /* css3 */
 }
 
-.ui-select-container .ui-select-choice {
+.select2-container .select2-choice {
     display: block;
     height: 26px;
     padding: 0 0 0 8px;
@@ -57,7 +57,7 @@ Based on https://github.com/ivaynberg/select2/blob/master/select2.css
     background-image: linear-gradient(top, #fff 0%, #eee 50%);
 }
 
-.ui-select-container.ui-select-drop-above .ui-select-choice {
+.select2-container.select2-drop-above .select2-choice {
     border-bottom-color: #aaa;
 
     border-radius: 0 0 4px 4px;
@@ -69,11 +69,11 @@ Based on https://github.com/ivaynberg/select2/blob/master/select2.css
     background-image: linear-gradient(top, #eee 0%, #fff 90%);
 }
 
-.ui-select-container.ui-select-allowclear .ui-select-choice .ui-select-chosen {
+.select2-container.select2-allowclear .select2-choice .select2-chosen {
     margin-right: 42px;
 }
 
-.ui-select-container .ui-select-choice > .ui-select-chosen {
+.select2-container .select2-choice > .select2-chosen {
     margin-right: 26px;
     display: block;
     overflow: hidden;
@@ -83,7 +83,7 @@ Based on https://github.com/ivaynberg/select2/blob/master/select2.css
     text-overflow: ellipsis;
 }
 
-.ui-select-container .ui-select-choice abbr {
+.select2-container .select2-choice abbr {
     display: none;
     width: 12px;
     height: 12px;
@@ -100,16 +100,16 @@ Based on https://github.com/ivaynberg/select2/blob/master/select2.css
     outline: 0;
 }
 
-.ui-select-container.ui-select-allowclear .ui-select-choice abbr {
+.select2-container.select2-allowclear .select2-choice abbr {
     display: inline-block;
 }
 
-.ui-select-container .ui-select-choice abbr:hover {
+.select2-container .select2-choice abbr:hover {
     background-position: right -11px;
     cursor: pointer;
 }
 
-.ui-select-drop-mask {
+.select2-drop-mask {
     border: 0;
     margin: 0;
     padding: 0;
@@ -127,7 +127,7 @@ Based on https://github.com/ivaynberg/select2/blob/master/select2.css
     filter: alpha(opacity=0);
 }
 
-.ui-select-drop {
+.select2-drop {
     width: 100%;
     margin-top: -1px;
     position: absolute;
@@ -145,7 +145,7 @@ Based on https://github.com/ivaynberg/select2/blob/master/select2.css
             box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
 }
 
-.ui-select-drop.ui-select-drop-above {
+.select2-drop.select2-drop-above {
     margin-top: 1px;
     border-top: 1px solid #aaa;
     border-bottom: 0;
@@ -156,25 +156,25 @@ Based on https://github.com/ivaynberg/select2/blob/master/select2.css
             box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
 }
 
-.ui-select-drop-active {
+.select2-drop-active {
     border: 1px solid #5897fb;
     border-top: none;
 }
 
-.ui-select-drop.ui-select-drop-above.ui-select-drop-active {
+.select2-drop.select2-drop-above.select2-drop-active {
     border-top: 1px solid #5897fb;
 }
 
-.ui-select-drop-auto-width {
+.select2-drop-auto-width {
     border-top: 1px solid #aaa;
     width: auto;
 }
 
-.ui-select-drop-auto-width .ui-select-search {
+.select2-drop-auto-width .select2-search {
     padding-top: 4px;
 }
 
-.ui-select-container .ui-select-choice .ui-select-arrow {
+.select2-container .select2-choice .select2-arrow {
     display: inline-block;
     width: 18px;
     height: 100%;
@@ -195,14 +195,14 @@ Based on https://github.com/ivaynberg/select2/blob/master/select2.css
     background-image: linear-gradient(top, #ccc 0%, #eee 60%);
 }
 
-.ui-select-container .ui-select-choice .ui-select-arrow b {
+.select2-container .select2-choice .select2-arrow b {
     display: block;
     width: 100%;
     height: 100%;
     background: url('select2.png') no-repeat 0 1px;
 }
 
-.ui-select-search {
+.select2-search {
     display: inline-block;
     width: 100%;
     min-height: 26px;
@@ -216,7 +216,7 @@ Based on https://github.com/ivaynberg/select2/blob/master/select2.css
     white-space: nowrap;
 }
 
-.ui-select-search input {
+.select2-search input {
     width: 100%;
     height: auto !important;
     min-height: 26px;
@@ -240,11 +240,11 @@ Based on https://github.com/ivaynberg/select2/blob/master/select2.css
     background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #fff 85%, #eee 99%);
 }
 
-.ui-select-drop.ui-select-drop-above .ui-select-search input {
+.select2-drop.select2-drop-above .select2-search input {
     margin-top: 4px;
 }
 
-.ui-select-search input.ui-select-active {
+.select2-search input.select2-active {
     background: #fff url('select2-spinner.gif') no-repeat 100%;
     background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
     background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
@@ -252,8 +252,8 @@ Based on https://github.com/ivaynberg/select2/blob/master/select2.css
     background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(top, #fff 85%, #eee 99%);
 }
 
-.ui-select-container-active .ui-select-choice,
-.ui-select-container-active .ui-select-choices {
+.select2-container-active .select2-choice,
+.select2-container-active .select2-choices {
     border: 1px solid #5897fb;
     outline: none;
 
@@ -261,7 +261,7 @@ Based on https://github.com/ivaynberg/select2/blob/master/select2.css
             box-shadow: 0 0 5px rgba(0, 0, 0, .3);
 }
 
-.ui-select-dropdown-open .ui-select-choice {
+.select2-dropdown-open .select2-choice {
     border-bottom-color: transparent;
     -webkit-box-shadow: 0 1px 0 #fff inset;
             box-shadow: 0 1px 0 #fff inset;
@@ -277,8 +277,8 @@ Based on https://github.com/ivaynberg/select2/blob/master/select2.css
     background-image: linear-gradient(top, #fff 0%, #eee 50%);
 }
 
-.ui-select-dropdown-open.ui-select-drop-above .ui-select-choice,
-.ui-select-dropdown-open.ui-select-drop-above .ui-select-choices {
+.select2-dropdown-open.select2-drop-above .select2-choice,
+.select2-dropdown-open.select2-drop-above .select2-choices {
     border: 1px solid #5897fb;
     border-top-color: transparent;
 
@@ -289,17 +289,17 @@ Based on https://github.com/ivaynberg/select2/blob/master/select2.css
     background-image: linear-gradient(bottom, #fff 0%, #eee 50%);
 }
 
-.ui-select-dropdown-open .ui-select-choice .ui-select-arrow {
+.select2-dropdown-open .select2-choice .select2-arrow {
     background: transparent;
     border-left: none;
     filter: none;
 }
-.ui-select-dropdown-open .ui-select-choice .ui-select-arrow b {
+.select2-dropdown-open .select2-choice .select2-arrow b {
     background-position: -18px 1px;
 }
 
 /* results */
-.ui-select-results {
+.select2-results {
     max-height: 200px;
     padding: 0 0 0 4px;
     margin: 4px 4px 4px 0;
@@ -309,30 +309,30 @@ Based on https://github.com/ivaynberg/select2/blob/master/select2.css
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-.ui-select-results ul.ui-select-result-sub {
+.select2-results ul.select2-result-sub {
     margin: 0;
     padding-left: 0;
 }
 
-.ui-select-results ul.ui-select-result-sub > li .ui-select-result-label { padding-left: 20px }
-.ui-select-results ul.ui-select-result-sub ul.ui-select-result-sub > li .ui-select-result-label { padding-left: 40px }
-.ui-select-results ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub > li .ui-select-result-label { padding-left: 60px }
-.ui-select-results ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub > li .ui-select-result-label { padding-left: 80px }
-.ui-select-results ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub > li .ui-select-result-label { padding-left: 100px }
-.ui-select-results ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub > li .ui-select-result-label { padding-left: 110px }
-.ui-select-results ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub ul.ui-select-result-sub > li .ui-select-result-label { padding-left: 120px }
+.select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px }
+.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px }
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px }
 
-.ui-select-results li {
+.select2-results li {
     list-style: none;
     display: list-item;
     background-image: none;
 }
 
-.ui-select-results li.ui-select-result-with-children > .ui-select-result-label {
+.select2-results li.select2-result-with-children > .select2-result-label {
     font-weight: bold;
 }
 
-.ui-select-results .ui-select-result-label {
+.select2-results .select2-result-label {
     padding: 3px 7px 4px;
     margin: 0;
     cursor: pointer;
@@ -346,29 +346,29 @@ Based on https://github.com/ivaynberg/select2/blob/master/select2.css
               user-select: none;
 }
 
-.ui-select-results .ui-select-highlighted {
+.select2-results .select2-highlighted {
     background: #3875d7;
     color: #fff;
 }
 
-.ui-select-results li em {
+.select2-results li em {
     background: #feffde;
     font-style: normal;
 }
 
-.ui-select-results .ui-select-highlighted em {
+.select2-results .select2-highlighted em {
     background: transparent;
 }
 
-.ui-select-results .ui-select-highlighted ul {
+.select2-results .select2-highlighted ul {
     background: #fff;
     color: #000;
 }
 
 
-.ui-select-results .ui-select-no-results,
-.ui-select-results .ui-select-searching,
-.ui-select-results .ui-select-selection-limit {
+.select2-results .select2-no-results,
+.select2-results .select2-searching,
+.select2-results .select2-selection-limit {
     background: #f4f4f4;
     display: list-item;
 }
@@ -376,54 +376,54 @@ Based on https://github.com/ivaynberg/select2/blob/master/select2.css
 /*
 disabled look for disabled choices in the results dropdown
 */
-.ui-select-results .ui-select-disabled.ui-select-highlighted {
+.select2-results .select2-disabled.select2-highlighted {
     color: #666;
     background: #f4f4f4;
     display: list-item;
     cursor: default;
 }
-.ui-select-results .ui-select-disabled {
+.select2-results .select2-disabled {
   background: #f4f4f4;
   display: list-item;
   cursor: default;
 }
 
-.ui-select-results .ui-select-selected {
+.select2-results .select2-selected {
     display: none;
 }
 
-.ui-select-more-results.ui-select-active {
+.select2-more-results.select2-active {
     background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%;
 }
 
-.ui-select-more-results {
+.select2-more-results {
     background: #f4f4f4;
     display: list-item;
 }
 
 /* disabled styles */
 
-.ui-select-container.ui-select-container-disabled .ui-select-choice {
+.select2-container.select2-container-disabled .select2-choice {
     background-color: #f4f4f4;
     background-image: none;
     border: 1px solid #ddd;
     cursor: default;
 }
 
-.ui-select-container.ui-select-container-disabled .ui-select-choice .ui-select-arrow {
+.select2-container.select2-container-disabled .select2-choice .select2-arrow {
     background-color: #f4f4f4;
     background-image: none;
     border-left: 0;
 }
 
-.ui-select-container.ui-select-container-disabled .ui-select-choice abbr {
+.select2-container.select2-container-disabled .select2-choice abbr {
     display: none;
 }
 
 
 /* multiselect */
 
-.ui-select-container-multi .ui-select-choices {
+.select2-container-multi .select2-choices {
     height: auto !important;
     height: 1%;
     margin: 0;
@@ -441,36 +441,36 @@ disabled look for disabled choices in the results dropdown
     background-image: linear-gradient(top, #eee 1%, #fff 15%);
 }
 
-.ui-select-locked {
+.select2-locked {
   padding: 3px 5px 3px 5px !important;
 }
 
-.ui-select-container-multi .ui-select-choices {
+.select2-container-multi .select2-choices {
     min-height: 26px;
 }
 
-.ui-select-container-multi.ui-select-container-active .ui-select-choices {
+.select2-container-multi.select2-container-active .select2-choices {
     border: 1px solid #5897fb;
     outline: none;
 
     -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
             box-shadow: 0 0 5px rgba(0, 0, 0, .3);
 }
-.ui-select-container-multi .ui-select-choices li {
+.select2-container-multi .select2-choices li {
     float: left;
     list-style: none;
 }
-html[dir="rtl"] .ui-select-container-multi .ui-select-choices li
+html[dir="rtl"] .select2-container-multi .select2-choices li
 {
     float: right;
 }
-.ui-select-container-multi .ui-select-choices .ui-select-search-field {
+.select2-container-multi .select2-choices .select2-search-field {
     margin: 0;
     padding: 0;
     white-space: nowrap;
 }
 
-.ui-select-container-multi .ui-select-choices .ui-select-search-field input {
+.select2-container-multi .select2-choices .select2-search-field input {
     padding: 5px;
     margin: 1px 0;
 
@@ -484,15 +484,15 @@ html[dir="rtl"] .ui-select-container-multi .ui-select-choices li
     background: transparent !important;
 }
 
-.ui-select-container-multi .ui-select-choices .ui-select-search-field input.ui-select-active {
+.select2-container-multi .select2-choices .select2-search-field input.select2-active {
     background: #fff url('select2-spinner.gif') no-repeat 100% !important;
 }
 
-.ui-select-default {
+.select2-default {
     color: #999 !important;
 }
 
-.ui-select-container-multi .ui-select-choices .ui-select-search-choice {
+.select2-container-multi .select2-choices .select2-search-choice {
     padding: 3px 5px 3px 18px;
     margin: 3px 0 3px 5px;
     position: relative;
@@ -522,19 +522,19 @@ html[dir="rtl"] .ui-select-container-multi .ui-select-choices li
     background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
     background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
 }
-html[dir="rtl"] .ui-select-container-multi .ui-select-choices .ui-select-search-choice
+html[dir="rtl"] .select2-container-multi .select2-choices .select2-search-choice
 {
     margin-left: 0;
     margin-right: 5px;
 }
-.ui-select-container-multi .ui-select-choices .ui-select-search-choice .ui-select-chosen {
+.select2-container-multi .select2-choices .select2-search-choice .select2-chosen {
     cursor: default;
 }
-.ui-select-container-multi .ui-select-choices .ui-select-search-choice-focus {
+.select2-container-multi .select2-choices .select2-search-choice-focus {
     background: #d4d4d4;
 }
 
-.ui-select-search-choice-close {
+.select2-search-choice-close {
     display: block;
     width: 12px;
     height: 13px;
@@ -546,49 +546,49 @@ html[dir="rtl"] .ui-select-container-multi .ui-select-choices .ui-select-search-
     outline: none;
     background: url('select2.png') right top no-repeat;
 }
-html[dir="rtl"] .ui-select-search-choice-close {
+html[dir="rtl"] .select2-search-choice-close {
     right: auto;
     left: 3px;
 }
 
-.ui-select-container-multi .ui-select-search-choice-close {
+.select2-container-multi .select2-search-choice-close {
     left: 3px;
 }
 
-.ui-select-container-multi .ui-select-choices .ui-select-search-choice .ui-select-search-choice-close:hover {
+.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
   background-position: right -11px;
 }
-.ui-select-container-multi .ui-select-choices .ui-select-search-choice-focus .ui-select-search-choice-close {
+.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
     background-position: right -11px;
 }
 
 /* disabled styles */
-.ui-select-container-multi.ui-select-container-disabled .ui-select-choices {
+.select2-container-multi.select2-container-disabled .select2-choices {
     background-color: #f4f4f4;
     background-image: none;
     border: 1px solid #ddd;
     cursor: default;
 }
 
-.ui-select-container-multi.ui-select-container-disabled .ui-select-choices .ui-select-search-choice {
+.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
     padding: 3px 5px 3px 5px;
     border: 1px solid #ddd;
     background-image: none;
     background-color: #f4f4f4;
 }
 
-.ui-select-container-multi.ui-select-container-disabled .ui-select-choices .ui-select-search-choice .ui-select-search-choice-close {    display: none;
+.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {    display: none;
     background: none;
 }
 /* end multiselect */
 
 
-.ui-select-result-selectable .ui-select-match,
-.ui-select-result-unselectable .ui-select-match {
+.select2-result-selectable .select2-match,
+.select2-result-unselectable .select2-match {
     text-decoration: underline;
 }
 
-.ui-select-offscreen, .ui-select-offscreen:focus {
+.select2-offscreen, .select2-offscreen:focus {
     clip: rect(0 0 0 0) !important;
     width: 1px !important;
     height: 1px !important;
@@ -602,11 +602,11 @@ html[dir="rtl"] .ui-select-search-choice-close {
     top: 0px !important;
 }
 
-.ui-select-display-none {
+.select2-display-none {
     display: none;
 }
 
-.ui-select-measure-scrollbar {
+.select2-measure-scrollbar {
     position: absolute;
     top: -10000px;
     left: -10000px;
@@ -617,12 +617,12 @@ html[dir="rtl"] .ui-select-search-choice-close {
 /* Retina-ize icons */
 
 @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi)  {
-  .ui-select-search input, .ui-select-search-choice-close, .ui-select-container .ui-select-choice abbr, .ui-select-container .ui-select-choice .ui-select-arrow b {
+  .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice .select2-arrow b {
       background-image: url('select2x2.png') !important;
       background-repeat: no-repeat !important;
       background-size: 60px 40px !important;
   }
-  .ui-select-search input {
+  .select2-search input {
       background-position: 100% -21px !important;
   }
 }
\ No newline at end of file
diff --git a/src/select2.png b/src/select2/select2.png
similarity index 100%
rename from src/select2.png
rename to src/select2/select2.png
diff --git a/src/select2x2.png b/src/select2/select2x2.png
similarity index 100%
rename from src/select2x2.png
rename to src/select2/select2x2.png

From 3dad74d7861eb2066049e2b9a5c4f1218dab47b8 Mon Sep 17 00:00:00 2001
From: dimirc <wlacoka@gmail.com>
Date: Mon, 18 Nov 2013 02:07:14 -0500
Subject: [PATCH 02/10] Add pointer cursor to .ui-select-match elements

---
 demo/index.html            | 2 +-
 src/select.css             | 3 +++
 src/select2/match.tpl.html | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index f2bfb1119..af0b78dd1 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -15,7 +15,7 @@
     <!-- Select2 Theme -->
     <link rel="stylesheet" href="../src/select2/select2.css"/>
 
-    <!-- <link rel="stylesheet" href="../src/select.css"/> -->
+    <link rel="stylesheet" href="../src/select.css"/>
     
     <style>
         body {
diff --git a/src/select.css b/src/select.css
index 26e985f37..84f6f4809 100644
--- a/src/select.css
+++ b/src/select.css
@@ -38,3 +38,6 @@
 	width: 200px;
 }
 
+.ui-select-match {
+	cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/select2/match.tpl.html b/src/select2/match.tpl.html
index a0cc040db..0b50e4c9f 100644
--- a/src/select2/match.tpl.html
+++ b/src/select2/match.tpl.html
@@ -1,4 +1,4 @@
-<a href="javascript:void(0)" class="ui-select-match select2-choice" ng-click="activate($event)">
+<a class="ui-select-match select2-choice" ng-click="activate($event)">
   <span class="select2-arrow"><b></b></span>
   <span class="select2-chosen">{{selectedLabel}}</span>
 	<div ng-hide='$select.selected'>{{placeholder}}</div>

From 917e520c25faf4c9a9a56ac69c98fe3932186dca Mon Sep 17 00:00:00 2001
From: dimirc <wlacoka@gmail.com>
Date: Mon, 18 Nov 2013 02:13:11 -0500
Subject: [PATCH 03/10] Create .ui-select-highlight to use with highlight
 filter

---
 src/select.css | 7 ++++++-
 src/select.js  | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/select.css b/src/select.css
index 84f6f4809..32bab26f7 100644
--- a/src/select.css
+++ b/src/select.css
@@ -40,4 +40,9 @@
 
 .ui-select-match {
 	cursor: pointer;
-}
\ No newline at end of file
+}
+
+.ui-select-highlight {
+	font-weight: bold;
+}
+
diff --git a/src/select.js b/src/select.js
index 3c2d4eabe..e11b1c4e2 100644
--- a/src/select.js
+++ b/src/select.js
@@ -149,6 +149,6 @@ angular.module('ui.select', ['ui.keypress'])
     return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
   }
   return function(matchItem, query) {
-    return query ? matchItem.replace(new RegExp(escapeRegexp(query), 'gi'), '<strong>$&</strong>') : matchItem;
+    return query ? matchItem.replace(new RegExp(escapeRegexp(query), 'gi'), '<span class="ui-select-highlight">$&</span>') : matchItem;
   };
 });

From f4aadca294ce0e850fc4bef19a389024c94ee968 Mon Sep 17 00:00:00 2001
From: dimirc <wlacoka@gmail.com>
Date: Tue, 19 Nov 2013 00:37:55 -0500
Subject: [PATCH 04/10] Add ui-select-* classes to flag important elements

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

diff --git a/src/select2/choices.tpl.html b/src/select2/choices.tpl.html
index acf335ff2..7e94367d9 100644
--- a/src/select2/choices.tpl.html
+++ b/src/select2/choices.tpl.html
@@ -1,5 +1,5 @@
-<ul class="ui-select-choices select2-results">
-  <li ng-class="{'select2-highlighted':$select.index==$index}" ng-click="$select(item)" ng-mousemove="$select.index=$index">
+<ul class="ui-select-choices ui-select-choices-content select2-results">
+  <li class="ui-select-choices-row" ng-class="{'select2-highlighted':$select.index==$index}" ng-click="$select(item)" ng-mouseenter="$select.index=$index">
     <div class="select2-result-label" ng-transclude></div>
   </li>
 </ul>
\ No newline at end of file

From 9d2fe841fdabf810c5a4e70eb9e6e78c81035115 Mon Sep 17 00:00:00 2001
From: dimirc <wlacoka@gmail.com>
Date: Tue, 19 Nov 2013 00:42:59 -0500
Subject: [PATCH 05/10] Move helper function getElementsByClassName to service

---
 src/select.js | 62 ++++++++++++++++++++++++++++++---------------------
 1 file changed, 36 insertions(+), 26 deletions(-)

diff --git a/src/select.js b/src/select.js
index e11b1c4e2..314d06177 100644
--- a/src/select.js
+++ b/src/select.js
@@ -5,10 +5,9 @@ angular.module('ui.select', ['ui.keypress'])
   defaultPlaceholder: 'Select Item',
 })
 
-.directive('uiSelect', function($document,$timeout,uiSelectConfig){
+.directive('uiSelect', function($document,$timeout,uiSelectConfig,uiSelectElements){
   return {
     restrict: 'E',
-    /* jshint multistr: true */
     templateUrl: function(tElement, tAttrs) {
       var theme = tAttrs.theme || uiSelectConfig.defaultTheme;
       return '../src/' + theme + '/select.tpl.html';
@@ -21,23 +20,13 @@ angular.module('ui.select', ['ui.keypress'])
       return function($scope, $elm, $attrs, ngModel){
         transcludeFn($scope, function(clone) {
           $scope.open = false;
-          var getElementsByClassName = (function() {
-            //To support IE8
-            return document.getElementsByClassdName ?
-              function(context, className) {
-               return angular.element(context.getElementsByClassName(className));
-              } :
-              function(context, className) {
-               return angular.element(context.querySelectorAll('.' + className));
-              };
-          })();
 
           //Set transcluded elements to their correct position on template
           var transcluded = angular.element('<div/>').append(clone);
-          var transMatch = getElementsByClassName(transcluded[0],'ui-select-match');
-          var transChoices = getElementsByClassName(transcluded[0],'ui-select-choices');
-          getElementsByClassName($elm[0],'ui-select-match').replaceWith(transMatch);
-          getElementsByClassName($elm[0],'ui-select-choices').replaceWith(transChoices);
+          var transMatch = uiSelectElements.byClassName(transcluded[0],'ui-select-match');
+          var transChoices = uiSelectElements.byClassName(transcluded[0],'ui-select-choices');
+          uiSelectElements.byClassName($elm[0],'ui-select-match').replaceWith(transMatch);
+          uiSelectElements.byClassName($elm[0],'ui-select-choices').replaceWith(transChoices);
 
           var input = $elm.find('input');
           $scope.activate = function($event){
@@ -58,7 +47,7 @@ angular.module('ui.select', ['ui.keypress'])
             }
           };
           $scope.down = function(){
-            items = $elm.find('ul').children().length -1;
+            items = uiSelectElements.byClassName($elm[0],'ui-select-choices-row').length -1;
             if ($scope.$select.index < items) {
               $scope.$select.index++;
               $scope.ensureHighlightVisible();
@@ -90,7 +79,7 @@ angular.module('ui.select', ['ui.keypress'])
   };
 })
 
-.directive('choices', function($sce,uiSelectConfig) {
+.directive('choices', function($sce,uiSelectConfig,uiSelectElements) {
   return {
     // require: '^uiSelect',
     restrict: 'E',
@@ -102,20 +91,20 @@ angular.module('ui.select', ['ui.keypress'])
       return '../src/' + theme + '/choices.tpl.html';
     },
     compile: function(tElement, tAttrs, transcludeFn) {
-      tElement.find("li").attr("ng-repeat", tAttrs.data);
+      uiSelectElements.byClassName(tElement[0],'ui-select-choices-row').attr("ng-repeat", tAttrs.data);
       return function(scope, element, attrs){
         scope.trustAsHtml = function(value) {
           return $sce.trustAsHtml(value);
         };
+        var container = element.hasClass('ui-select-choices-content') ? element[0] : uiSelectElements.byClassName(element[0],'ui-select-choices-content')[0];
         scope.ensureHighlightVisible = function(){
-          var highlighted = element[0].children[scope.$select.index],
-              ul = element[0],
-              posY = highlighted.offsetTop + highlighted.clientHeight - ul.scrollTop,
-              maxHeight = 200; //Same as css
+          var highlighted = uiSelectElements.byClassName(element[0],'ui-select-choices-row')[scope.$select.index],
+              posY = highlighted.offsetTop + highlighted.clientHeight - container.scrollTop,
+              maxHeight = 200; //TODO Need to get this value from container.max-height 
           if (posY>maxHeight){
-            ul.scrollTop += posY-maxHeight;
+            container.scrollTop += posY-maxHeight;
           }else if (posY<highlighted.clientHeight){
-            ul.scrollTop -= highlighted.clientHeight-posY;
+            container.scrollTop -= highlighted.clientHeight-posY;
           }
         };
       };
@@ -151,4 +140,25 @@ angular.module('ui.select', ['ui.keypress'])
   return function(matchItem, query) {
     return query ? matchItem.replace(new RegExp(escapeRegexp(query), 'gi'), '<span class="ui-select-highlight">$&</span>') : matchItem;
   };
-});
+})
+
+.factory('uiSelectElements', function () {
+
+  var getElementsByClassName = (function() {
+    //To support IE8
+    return document.getElementsByClassName ?
+      function(context, className) {
+       return angular.element(context.getElementsByClassName(className));
+      } :
+      function(context, className) {
+       return angular.element(context.querySelectorAll('.' + className));
+      };
+  })();
+
+  return {
+    byClassName:function (context, className) {
+      return getElementsByClassName(context, className);
+    }
+    
+  };
+});
\ No newline at end of file

From e23e9b4eef9498d52ee60430b7fe8a507ea46a5d Mon Sep 17 00:00:00 2001
From: dimirc <wlacoka@gmail.com>
Date: Tue, 19 Nov 2013 01:02:17 -0500
Subject: [PATCH 06/10] Add selectize themes

---
 demo/demo.js                           |   6 +
 demo/index.html                        |   5 +
 src/selectize/choices.tpl.html         |   8 +
 src/selectize/match.tpl.html           |   1 +
 src/selectize/select.tpl.html          |   8 +
 src/selectize/selectize.bootstrap2.css | 550 +++++++++++++++++++++++++
 src/selectize/selectize.bootstrap3.css | 448 ++++++++++++++++++++
 src/selectize/selectize.default.css    | 442 ++++++++++++++++++++
 8 files changed, 1468 insertions(+)
 create mode 100644 src/selectize/choices.tpl.html
 create mode 100644 src/selectize/match.tpl.html
 create mode 100644 src/selectize/select.tpl.html
 create mode 100644 src/selectize/selectize.bootstrap2.css
 create mode 100644 src/selectize/selectize.bootstrap3.css
 create mode 100644 src/selectize/selectize.default.css

diff --git a/demo/demo.js b/demo/demo.js
index 3d0eb85a0..2920c4871 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -1,4 +1,10 @@
 angular.module('DemoApp', ['ui.select'])
+
+  .config(function(uiSelectConfig){
+    // uiSelectConfig.defaultTheme = 'select2';
+    // uiSelectConfig.defaultTheme = 'selectize';
+  })
+
   .controller('MainCtrl', ['$scope', function ($scope) {
 
     $scope.data = {};
diff --git a/demo/index.html b/demo/index.html
index af0b78dd1..fd112e367 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -15,6 +15,11 @@
     <!-- Select2 Theme -->
     <link rel="stylesheet" href="../src/select2/select2.css"/>
 
+    <!-- Selectize (Default) Theme -->
+    <!-- <link rel="stylesheet" href="../src/selectize/selectize.default.css"/> -->
+    <!-- <link rel="stylesheet" href="../src/selectize/selectize.bootstrap2.css"/> -->
+    <!-- <link rel="stylesheet" href="../src/selectize/selectize.bootstrap3.css"/> -->
+
     <link rel="stylesheet" href="../src/select.css"/>
     
     <style>
diff --git a/src/selectize/choices.tpl.html b/src/selectize/choices.tpl.html
new file mode 100644
index 000000000..53e98ffe1
--- /dev/null
+++ b/src/selectize/choices.tpl.html
@@ -0,0 +1,8 @@
+<div ng-show="open" class="ui-select-choices selectize-dropdown single" style="width: 300px; top: 36px; left: 0px; visibility: visible;">
+  <div class="ui-select-choices-content selectize-dropdown-content">
+	  <div class="ui-select-choices-row" ng-class="{'active':$select.index==$index}" 
+	  	ng-click="$select(item)" ng-mouseenter="$select.index=$index">
+    	<div class="option" data-selectable ng-transclude></div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/selectize/match.tpl.html b/src/selectize/match.tpl.html
new file mode 100644
index 000000000..c37c9471e
--- /dev/null
+++ b/src/selectize/match.tpl.html
@@ -0,0 +1 @@
+<div ng-hide="open || !$select.selected" class="ui-select-match"></div>
\ No newline at end of file
diff --git a/src/selectize/select.tpl.html b/src/selectize/select.tpl.html
new file mode 100644
index 000000000..953ae6db9
--- /dev/null
+++ b/src/selectize/select.tpl.html
@@ -0,0 +1,8 @@
+<div class="selectize-control single">
+    <div class="selectize-input" ng-class="{'input-active dropdown-active':open}" ng-click="activate($event)">
+        <div class="ui-select-match"></div>
+        <input class="ui-select-search" type="text" autocomplete="off" tabindex="" placeholder="{{placeholder}}"
+        ui-keydown="{up:'up()', down:'down()', esc:'close()', enter:'$select((data.items|filter: $select.search)[$select.index])'}" ng-model="$select.search" ng-hide="$select.selected && !open">
+    </div>
+    <div class="ui-select-choices"></div>
+</div>
\ No newline at end of file
diff --git a/src/selectize/selectize.bootstrap2.css b/src/selectize/selectize.bootstrap2.css
new file mode 100644
index 000000000..8dff2d88b
--- /dev/null
+++ b/src/selectize/selectize.bootstrap2.css
@@ -0,0 +1,550 @@
+/**
+ * selectize.bootstrap2.css (v0.8.0) - Bootstrap 2 Theme
+ * Copyright (c) 2013 Brian Reavis & contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
+ * file except in compliance with the License. You may obtain a copy of the License at:
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
+ * ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ *
+ * @author Brian Reavis <brian@thirdroute.com>
+ */
+
+.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
+  background: #f2f2f2 !important;
+  background: rgba(0, 0, 0, 0.06) !important;
+  border: 0 none !important;
+  visibility: visible !important;
+  -webkit-box-shadow: inset 0 0 12px 4px #ffffff;
+          box-shadow: inset 0 0 12px 4px #ffffff;
+}
+
+.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
+  content: '!';
+  visibility: hidden;
+}
+
+.selectize-control.plugin-drag_drop .ui-sortable-helper {
+  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.selectize-dropdown-header {
+  position: relative;
+  padding: 3px 10px;
+  background: #f8f8f8;
+  border-bottom: 1px solid #d0d0d0;
+  -webkit-border-radius: 4px 4px 0 0;
+     -moz-border-radius: 4px 4px 0 0;
+          border-radius: 4px 4px 0 0;
+}
+
+.selectize-dropdown-header-close {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  margin-top: -12px;
+  font-size: 20px !important;
+  line-height: 20px;
+  color: #333333;
+  opacity: 0.4;
+}
+
+.selectize-dropdown-header-close:hover {
+  color: #000000;
+}
+
+.selectize-dropdown.plugin-optgroup_columns .optgroup {
+  float: left;
+  border-top: 0 none;
+  border-right: 1px solid #f2f2f2;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
+  border-right: 0 none;
+}
+
+.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
+  display: none;
+}
+
+.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
+  border-top: 0 none;
+}
+
+.selectize-control.plugin-remove_button [data-value] {
+  position: relative;
+  padding-right: 24px !important;
+}
+
+.selectize-control.plugin-remove_button [data-value] .remove {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: inline-block;
+  width: 17px;
+  padding: 1px 0 0 0;
+  font-size: 12px;
+  font-weight: bold;
+  color: inherit;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  border-left: 1px solid #cccccc;
+  -webkit-border-radius: 0 2px 2px 0;
+     -moz-border-radius: 0 2px 2px 0;
+          border-radius: 0 2px 2px 0;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.selectize-control.plugin-remove_button [data-value] .remove:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.selectize-control.plugin-remove_button [data-value].active .remove {
+  border-left-color: #0077b3;
+}
+
+.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
+  background: none;
+}
+
+.selectize-control.plugin-remove_button .disabled [data-value] .remove {
+  border-left-color: #e0e0e0;
+}
+
+.selectize-control {
+  position: relative;
+}
+
+.selectize-dropdown,
+.selectize-input,
+.selectize-input input {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  -webkit-font-smoothing: inherit;
+  line-height: 20px;
+  color: #333333;
+}
+
+.selectize-input,
+.selectize-control.single .selectize-input.input-active {
+  display: inline-block;
+  cursor: text;
+  background: #ffffff;
+}
+
+.selectize-input {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  width: 100%;
+  padding: 7px 10px;
+  overflow: hidden;
+  border: 1px solid #d0d0d0;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.selectize-control.multi .selectize-input.has-items {
+  padding: 5px 10px 2px;
+}
+
+.selectize-input.full {
+  background-color: #ffffff;
+}
+
+.selectize-input.disabled,
+.selectize-input.disabled * {
+  cursor: default !important;
+}
+
+.selectize-input.focus {
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+.selectize-input.dropdown-active {
+  -webkit-border-radius: 4px 4px 0 0;
+     -moz-border-radius: 4px 4px 0 0;
+          border-radius: 4px 4px 0 0;
+}
+
+.selectize-input > * {
+  display: -moz-inline-stack;
+  display: inline-block;
+  *display: inline;
+  vertical-align: baseline;
+  zoom: 1;
+}
+
+.selectize-control.multi .selectize-input > div {
+  padding: 1px 3px;
+  margin: 0 3px 3px 0;
+  color: #333333;
+  cursor: pointer;
+  background: #e6e6e6;
+  border: 1px solid #cccccc;
+}
+
+.selectize-control.multi .selectize-input > div.active {
+  color: #ffffff;
+  background: #0088cc;
+  border: 1px solid #0077b3;
+}
+
+.selectize-control.multi .selectize-input.disabled > div,
+.selectize-control.multi .selectize-input.disabled > div.active {
+  color: #474747;
+  background: #fafafa;
+  border: 1px solid #e0e0e0;
+}
+
+.selectize-input > input {
+  max-width: 100% !important;
+  max-height: none !important;
+  min-height: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  line-height: inherit !important;
+  text-indent: 0 !important;
+  background: none !important;
+  border: 0 none !important;
+  -webkit-box-shadow: none !important;
+          box-shadow: none !important;
+  -webkit-user-select: auto !important;
+}
+
+.selectize-input > input:focus {
+  outline: none !important;
+}
+
+.selectize-input::after {
+  display: block;
+  clear: left;
+  content: ' ';
+}
+
+.selectize-input.dropdown-active::before {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  height: 1px;
+  background: #e5e5e5;
+  content: ' ';
+}
+
+.selectize-dropdown {
+  position: absolute;
+  z-index: 10;
+  margin: -1px 0 0 0;
+  background: #ffffff;
+  border: 1px solid #d0d0d0;
+  border-top: 0 none;
+  -webkit-border-radius: 0 0 4px 4px;
+     -moz-border-radius: 0 0 4px 4px;
+          border-radius: 0 0 4px 4px;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.selectize-dropdown [data-selectable] {
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.selectize-dropdown [data-selectable] .highlight {
+  background: rgba(255, 237, 40, 0.4);
+  -webkit-border-radius: 1px;
+     -moz-border-radius: 1px;
+          border-radius: 1px;
+}
+
+.selectize-dropdown [data-selectable],
+.selectize-dropdown .optgroup-header {
+  padding: 3px 10px;
+}
+
+.selectize-dropdown .optgroup:first-child .optgroup-header {
+  border-top: 0 none;
+}
+
+.selectize-dropdown .optgroup-header {
+  color: #999999;
+  cursor: default;
+  background: #ffffff;
+}
+
+.selectize-dropdown .active {
+  color: #ffffff;
+  background-color: #0088cc;
+}
+
+.selectize-dropdown .active.create {
+  color: #ffffff;
+}
+
+.selectize-dropdown .create {
+  color: rgba(51, 51, 51, 0.5);
+}
+
+.selectize-dropdown-content {
+  max-height: 200px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.selectize-control.single .selectize-input,
+.selectize-control.single .selectize-input input {
+  cursor: pointer;
+}
+
+.selectize-control.single .selectize-input.input-active,
+.selectize-control.single .selectize-input.input-active input {
+  cursor: text;
+}
+
+.selectize-control.single .selectize-input:after {
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  display: block;
+  width: 0;
+  height: 0;
+  margin-top: -3px;
+  border-color: #000000 transparent transparent transparent;
+  border-style: solid;
+  border-width: 5px 5px 0 5px;
+  content: ' ';
+}
+
+.selectize-control.single .selectize-input.dropdown-active:after {
+  margin-top: -4px;
+  border-color: transparent transparent #000000 transparent;
+  border-width: 0 5px 5px 5px;
+}
+
+.selectize-control.rtl.single .selectize-input:after {
+  right: auto;
+  left: 15px;
+}
+
+.selectize-control.rtl .selectize-input > input {
+  margin: 0 4px 0 -2px !important;
+}
+
+.selectize-control .selectize-input.disabled {
+  background-color: #ffffff;
+  opacity: 0.5;
+}
+
+.selectize-dropdown {
+  z-index: 1000;
+  margin: 2px 0 0 0;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+}
+
+.selectize-dropdown .optgroup-header {
+  font-size: 11px;
+  font-weight: bold;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  text-transform: uppercase;
+}
+
+.selectize-dropdown .optgroup:first-child:before {
+  display: none;
+}
+
+.selectize-dropdown .optgroup:before {
+  display: block;
+  *width: 100%;
+  height: 1px;
+  margin: 9px 1px;
+  *margin: -5px 0 5px;
+  margin-right: -10px;
+  margin-left: -10px;
+  overflow: hidden;
+  background-color: #e5e5e5;
+  border-bottom: 1px solid #ffffff;
+  content: ' ';
+}
+
+.selectize-dropdown [data-selectable].active {
+  background-color: #0081c2;
+  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
+  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
+  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
+}
+
+.selectize-dropdown-content {
+  padding: 5px 0;
+}
+
+.selectize-dropdown-header {
+  padding: 6px 10px;
+}
+
+.selectize-input {
+  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+       -o-transition: border linear 0.2s, box-shadow linear 0.2s;
+          transition: border linear 0.2s, box-shadow linear 0.2s;
+}
+
+.selectize-input.dropdown-active {
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+}
+
+.selectize-input.dropdown-active::before {
+  display: none;
+}
+
+.selectize-input.input-active,
+.selectize-input.input-active:hover,
+.selectize-control.multi .selectize-input.focus {
+  background: #ffffff !important;
+  border-color: rgba(82, 168, 236, 0.8) !important;
+  outline: 0 !important;
+  outline: thin dotted \9 !important;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) !important;
+     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) !important;
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) !important;
+}
+
+.selectize-control.single .selectize-input {
+  color: #333333;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+  background-color: #f5f5f5;
+  *background-color: #e6e6e6;
+  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
+  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
+  background-repeat: repeat-x;
+  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.selectize-control.single .selectize-input:hover,
+.selectize-control.single .selectize-input:focus,
+.selectize-control.single .selectize-input:active,
+.selectize-control.single .selectize-input.active,
+.selectize-control.single .selectize-input.disabled,
+.selectize-control.single .selectize-input[disabled] {
+  color: #333333;
+  background-color: #e6e6e6;
+  *background-color: #d9d9d9;
+}
+
+.selectize-control.single .selectize-input:active,
+.selectize-control.single .selectize-input.active {
+  background-color: #cccccc \9;
+}
+
+.selectize-control.single .selectize-input:hover {
+  color: #333333;
+  text-decoration: none;
+  background-position: 0 -15px;
+  -webkit-transition: background-position 0.1s linear;
+     -moz-transition: background-position 0.1s linear;
+       -o-transition: background-position 0.1s linear;
+          transition: background-position 0.1s linear;
+}
+
+.selectize-control.single .selectize-input.disabled {
+  background: #e6e6e6 !important;
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+}
+
+.selectize-control.multi .selectize-input {
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.selectize-control.multi .selectize-input.has-items {
+  padding-right: 7px;
+  padding-left: 7px;
+}
+
+.selectize-control.multi .selectize-input > div {
+  color: #333333;
+  text-shadow: none;
+  background-color: #f5f5f5;
+  *background-color: #e6e6e6;
+  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
+  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
+  background-repeat: repeat-x;
+  border: 1px solid #cccccc;
+  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.selectize-control.multi .selectize-input > div.active {
+  color: #ffffff;
+  text-shadow: none;
+  background-color: #0081c2;
+  *background-color: #0088cc;
+  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
+  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
+  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
+  background-repeat: repeat-x;
+  border: 1px solid #0088cc;
+  border-color: #0077b3 #0077b3 #004466;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
\ No newline at end of file
diff --git a/src/selectize/selectize.bootstrap3.css b/src/selectize/selectize.bootstrap3.css
new file mode 100644
index 000000000..b0dce0276
--- /dev/null
+++ b/src/selectize/selectize.bootstrap3.css
@@ -0,0 +1,448 @@
+/**
+ * selectize.bootstrap3.css (v0.8.0) - Bootstrap 3 Theme
+ * Copyright (c) 2013 Brian Reavis & contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
+ * file except in compliance with the License. You may obtain a copy of the License at:
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
+ * ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ *
+ * @author Brian Reavis <brian@thirdroute.com>
+ */
+
+.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
+  background: #f2f2f2 !important;
+  background: rgba(0, 0, 0, 0.06) !important;
+  border: 0 none !important;
+  visibility: visible !important;
+  -webkit-box-shadow: inset 0 0 12px 4px #ffffff;
+          box-shadow: inset 0 0 12px 4px #ffffff;
+}
+
+.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
+  content: '!';
+  visibility: hidden;
+}
+
+.selectize-control.plugin-drag_drop .ui-sortable-helper {
+  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.selectize-dropdown-header {
+  position: relative;
+  padding: 3px 12px;
+  background: #f8f8f8;
+  border-bottom: 1px solid #d0d0d0;
+  -webkit-border-radius: 4px 4px 0 0;
+     -moz-border-radius: 4px 4px 0 0;
+          border-radius: 4px 4px 0 0;
+}
+
+.selectize-dropdown-header-close {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  margin-top: -12px;
+  font-size: 20px !important;
+  line-height: 20px;
+  color: #333333;
+  opacity: 0.4;
+}
+
+.selectize-dropdown-header-close:hover {
+  color: #000000;
+}
+
+.selectize-dropdown.plugin-optgroup_columns .optgroup {
+  float: left;
+  border-top: 0 none;
+  border-right: 1px solid #f2f2f2;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
+  border-right: 0 none;
+}
+
+.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
+  display: none;
+}
+
+.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
+  border-top: 0 none;
+}
+
+.selectize-control.plugin-remove_button [data-value] {
+  position: relative;
+  padding-right: 24px !important;
+}
+
+.selectize-control.plugin-remove_button [data-value] .remove {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: inline-block;
+  width: 17px;
+  padding: 1px 0 0 0;
+  font-size: 12px;
+  font-weight: bold;
+  color: inherit;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  border-left: 1px solid rgba(0, 0, 0, 0);
+  -webkit-border-radius: 0 2px 2px 0;
+     -moz-border-radius: 0 2px 2px 0;
+          border-radius: 0 2px 2px 0;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.selectize-control.plugin-remove_button [data-value] .remove:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.selectize-control.plugin-remove_button [data-value].active .remove {
+  border-left-color: rgba(0, 0, 0, 0);
+}
+
+.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
+  background: none;
+}
+
+.selectize-control.plugin-remove_button .disabled [data-value] .remove {
+  border-left-color: rgba(77, 77, 77, 0);
+}
+
+.selectize-control {
+  position: relative;
+}
+
+.selectize-dropdown,
+.selectize-input,
+.selectize-input input {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  -webkit-font-smoothing: inherit;
+  line-height: 20px;
+  color: #333333;
+}
+
+.selectize-input,
+.selectize-control.single .selectize-input.input-active {
+  display: inline-block;
+  cursor: text;
+  background: #ffffff;
+}
+
+.selectize-input {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  width: 100%;
+  padding: 6px 12px;
+  overflow: hidden;
+  border: 1px solid #cccccc;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.selectize-control.multi .selectize-input.has-items {
+  padding: 5px 12px 2px;
+}
+
+.selectize-input.full {
+  background-color: #ffffff;
+}
+
+.selectize-input.disabled,
+.selectize-input.disabled * {
+  cursor: default !important;
+}
+
+.selectize-input.focus {
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+.selectize-input.dropdown-active {
+  -webkit-border-radius: 4px 4px 0 0;
+     -moz-border-radius: 4px 4px 0 0;
+          border-radius: 4px 4px 0 0;
+}
+
+.selectize-input > * {
+  display: -moz-inline-stack;
+  display: inline-block;
+  *display: inline;
+  vertical-align: baseline;
+  zoom: 1;
+}
+
+.selectize-control.multi .selectize-input > div {
+  padding: 1px 3px;
+  margin: 0 3px 3px 0;
+  color: #333333;
+  cursor: pointer;
+  background: #efefef;
+  border: 0 solid rgba(0, 0, 0, 0);
+}
+
+.selectize-control.multi .selectize-input > div.active {
+  color: #ffffff;
+  background: #428bca;
+  border: 0 solid rgba(0, 0, 0, 0);
+}
+
+.selectize-control.multi .selectize-input.disabled > div,
+.selectize-control.multi .selectize-input.disabled > div.active {
+  color: #808080;
+  background: #ffffff;
+  border: 0 solid rgba(77, 77, 77, 0);
+}
+
+.selectize-input > input {
+  max-width: 100% !important;
+  max-height: none !important;
+  min-height: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  line-height: inherit !important;
+  text-indent: 0 !important;
+  background: none !important;
+  border: 0 none !important;
+  -webkit-box-shadow: none !important;
+          box-shadow: none !important;
+  -webkit-user-select: auto !important;
+}
+
+.selectize-input > input:focus {
+  outline: none !important;
+}
+
+.selectize-input::after {
+  display: block;
+  clear: left;
+  content: ' ';
+}
+
+.selectize-input.dropdown-active::before {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  height: 1px;
+  background: #ffffff;
+  content: ' ';
+}
+
+.selectize-dropdown {
+  position: absolute;
+  z-index: 10;
+  margin: -1px 0 0 0;
+  background: #ffffff;
+  border: 1px solid #cccccc;
+  border-top: 0 none;
+  -webkit-border-radius: 0 0 4px 4px;
+     -moz-border-radius: 0 0 4px 4px;
+          border-radius: 0 0 4px 4px;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.selectize-dropdown [data-selectable] {
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.selectize-dropdown [data-selectable] .highlight {
+  background: rgba(255, 237, 40, 0.4);
+  -webkit-border-radius: 1px;
+     -moz-border-radius: 1px;
+          border-radius: 1px;
+}
+
+.selectize-dropdown [data-selectable],
+.selectize-dropdown .optgroup-header {
+  padding: 3px 12px;
+}
+
+.selectize-dropdown .optgroup:first-child .optgroup-header {
+  border-top: 0 none;
+}
+
+.selectize-dropdown .optgroup-header {
+  color: #999999;
+  cursor: default;
+  background: #ffffff;
+}
+
+.selectize-dropdown .active {
+  color: #ffffff;
+  background-color: #428bca;
+}
+
+.selectize-dropdown .active.create {
+  color: #ffffff;
+}
+
+.selectize-dropdown .create {
+  color: rgba(51, 51, 51, 0.5);
+}
+
+.selectize-dropdown-content {
+  max-height: 200px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.selectize-control.single .selectize-input,
+.selectize-control.single .selectize-input input {
+  cursor: pointer;
+}
+
+.selectize-control.single .selectize-input.input-active,
+.selectize-control.single .selectize-input.input-active input {
+  cursor: text;
+}
+
+.selectize-control.single .selectize-input:after {
+  position: absolute;
+  top: 50%;
+  right: 17px;
+  display: block;
+  width: 0;
+  height: 0;
+  margin-top: -3px;
+  border-color: #000000 transparent transparent transparent;
+  border-style: solid;
+  border-width: 5px 5px 0 5px;
+  content: ' ';
+}
+
+.selectize-control.single .selectize-input.dropdown-active:after {
+  margin-top: -4px;
+  border-color: transparent transparent #000000 transparent;
+  border-width: 0 5px 5px 5px;
+}
+
+.selectize-control.rtl.single .selectize-input:after {
+  right: auto;
+  left: 17px;
+}
+
+.selectize-control.rtl .selectize-input > input {
+  margin: 0 4px 0 -2px !important;
+}
+
+.selectize-control .selectize-input.disabled {
+  background-color: #ffffff;
+  opacity: 0.5;
+}
+
+.selectize-dropdown,
+.selectize-dropdown.form-control {
+  z-index: 1000;
+  height: auto;
+  padding: 0;
+  margin: 2px 0 0 0;
+  background: #ffffff;
+  border: 1px solid #cccccc;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+}
+
+.selectize-dropdown .optgroup-header {
+  font-size: 12px;
+  line-height: 1.428571429;
+}
+
+.selectize-dropdown .optgroup:first-child:before {
+  display: none;
+}
+
+.selectize-dropdown .optgroup:before {
+  display: block;
+  height: 1px;
+  margin: 9px 0;
+  margin-right: -12px;
+  margin-left: -12px;
+  overflow: hidden;
+  background-color: #e5e5e5;
+  content: ' ';
+}
+
+.selectize-dropdown-content {
+  padding: 5px 0;
+}
+
+.selectize-dropdown-header {
+  padding: 6px 12px;
+}
+
+.selectize-input {
+  min-height: 34px;
+}
+
+.selectize-input.dropdown-active {
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+}
+
+.selectize-input.dropdown-active::before {
+  display: none;
+}
+
+.selectize-input.focus {
+  border-color: #66afe9;
+  outline: 0;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+}
+
+.selectize-control.multi .selectize-input.has-items {
+  padding-right: 9px;
+  padding-left: 9px;
+}
+
+.selectize-control.multi .selectize-input > div {
+  -webkit-border-radius: 3px;
+     -moz-border-radius: 3px;
+          border-radius: 3px;
+}
+
+.form-control.selectize-control {
+  height: auto;
+  padding: 0;
+  background: none;
+  border: none;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
\ No newline at end of file
diff --git a/src/selectize/selectize.default.css b/src/selectize/selectize.default.css
new file mode 100644
index 000000000..259475ac6
--- /dev/null
+++ b/src/selectize/selectize.default.css
@@ -0,0 +1,442 @@
+/**
+ * selectize.default.css (v0.8.0) - Default Theme
+ * Copyright (c) 2013 Brian Reavis & contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
+ * file except in compliance with the License. You may obtain a copy of the License at:
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
+ * ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ *
+ * @author Brian Reavis <brian@thirdroute.com>
+ */
+
+.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
+  background: #f2f2f2 !important;
+  background: rgba(0, 0, 0, 0.06) !important;
+  border: 0 none !important;
+  visibility: visible !important;
+  -webkit-box-shadow: inset 0 0 12px 4px #ffffff;
+          box-shadow: inset 0 0 12px 4px #ffffff;
+}
+
+.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
+  content: '!';
+  visibility: hidden;
+}
+
+.selectize-control.plugin-drag_drop .ui-sortable-helper {
+  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.selectize-dropdown-header {
+  position: relative;
+  padding: 5px 8px;
+  background: #f8f8f8;
+  border-bottom: 1px solid #d0d0d0;
+  -webkit-border-radius: 3px 3px 0 0;
+     -moz-border-radius: 3px 3px 0 0;
+          border-radius: 3px 3px 0 0;
+}
+
+.selectize-dropdown-header-close {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  margin-top: -12px;
+  font-size: 20px !important;
+  line-height: 20px;
+  color: #303030;
+  opacity: 0.4;
+}
+
+.selectize-dropdown-header-close:hover {
+  color: #000000;
+}
+
+.selectize-dropdown.plugin-optgroup_columns .optgroup {
+  float: left;
+  border-top: 0 none;
+  border-right: 1px solid #f2f2f2;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
+  border-right: 0 none;
+}
+
+.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
+  display: none;
+}
+
+.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
+  border-top: 0 none;
+}
+
+.selectize-control.plugin-remove_button [data-value] {
+  position: relative;
+  padding-right: 24px !important;
+}
+
+.selectize-control.plugin-remove_button [data-value] .remove {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: inline-block;
+  width: 17px;
+  padding: 2px 0 0 0;
+  font-size: 12px;
+  font-weight: bold;
+  color: inherit;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  border-left: 1px solid #0073bb;
+  -webkit-border-radius: 0 2px 2px 0;
+     -moz-border-radius: 0 2px 2px 0;
+          border-radius: 0 2px 2px 0;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.selectize-control.plugin-remove_button [data-value] .remove:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.selectize-control.plugin-remove_button [data-value].active .remove {
+  border-left-color: #00578d;
+}
+
+.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
+  background: none;
+}
+
+.selectize-control.plugin-remove_button .disabled [data-value] .remove {
+  border-left-color: #aaaaaa;
+}
+
+.selectize-control {
+  position: relative;
+}
+
+.selectize-dropdown,
+.selectize-input,
+.selectize-input input {
+  font-family: inherit;
+  font-size: 13px;
+  -webkit-font-smoothing: inherit;
+  line-height: 18px;
+  color: #303030;
+}
+
+.selectize-input,
+.selectize-control.single .selectize-input.input-active {
+  display: inline-block;
+  cursor: text;
+  background: #ffffff;
+}
+
+.selectize-input {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  width: 100%;
+  padding: 8px 8px;
+  overflow: hidden;
+  border: 1px solid #d0d0d0;
+  -webkit-border-radius: 3px;
+     -moz-border-radius: 3px;
+          border-radius: 3px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.selectize-control.multi .selectize-input.has-items {
+  padding: 5px 8px 2px;
+}
+
+.selectize-input.full {
+  background-color: #ffffff;
+}
+
+.selectize-input.disabled,
+.selectize-input.disabled * {
+  cursor: default !important;
+}
+
+.selectize-input.focus {
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+.selectize-input.dropdown-active {
+  -webkit-border-radius: 3px 3px 0 0;
+     -moz-border-radius: 3px 3px 0 0;
+          border-radius: 3px 3px 0 0;
+}
+
+.selectize-input > * {
+  display: -moz-inline-stack;
+  display: inline-block;
+  *display: inline;
+  vertical-align: baseline;
+  zoom: 1;
+}
+
+.selectize-control.multi .selectize-input > div {
+  padding: 2px 6px;
+  margin: 0 3px 3px 0;
+  color: #ffffff;
+  cursor: pointer;
+  background: #1da7ee;
+  border: 1px solid #0073bb;
+}
+
+.selectize-control.multi .selectize-input > div.active {
+  color: #ffffff;
+  background: #92c836;
+  border: 1px solid #00578d;
+}
+
+.selectize-control.multi .selectize-input.disabled > div,
+.selectize-control.multi .selectize-input.disabled > div.active {
+  color: #ffffff;
+  background: #d2d2d2;
+  border: 1px solid #aaaaaa;
+}
+
+.selectize-input > input {
+  max-width: 100% !important;
+  max-height: none !important;
+  min-height: 0 !important;
+  padding: 0 !important;
+  margin: 0 1px !important;
+  line-height: inherit !important;
+  text-indent: 0 !important;
+  background: none !important;
+  border: 0 none !important;
+  -webkit-box-shadow: none !important;
+          box-shadow: none !important;
+  -webkit-user-select: auto !important;
+}
+
+.selectize-input > input:focus {
+  outline: none !important;
+}
+
+.selectize-input::after {
+  display: block;
+  clear: left;
+  content: ' ';
+}
+
+.selectize-input.dropdown-active::before {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  height: 1px;
+  background: #f0f0f0;
+  content: ' ';
+}
+
+.selectize-dropdown {
+  position: absolute;
+  z-index: 10;
+  margin: -1px 0 0 0;
+  background: #ffffff;
+  border: 1px solid #d0d0d0;
+  border-top: 0 none;
+  -webkit-border-radius: 0 0 3px 3px;
+     -moz-border-radius: 0 0 3px 3px;
+          border-radius: 0 0 3px 3px;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.selectize-dropdown [data-selectable] {
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.selectize-dropdown [data-selectable] .highlight {
+  background: rgba(125, 168, 208, 0.2);
+  -webkit-border-radius: 1px;
+     -moz-border-radius: 1px;
+          border-radius: 1px;
+}
+
+.selectize-dropdown [data-selectable],
+.selectize-dropdown .optgroup-header {
+  padding: 5px 8px;
+}
+
+.selectize-dropdown .optgroup:first-child .optgroup-header {
+  border-top: 0 none;
+}
+
+.selectize-dropdown .optgroup-header {
+  color: #303030;
+  cursor: default;
+  background: #ffffff;
+}
+
+.selectize-dropdown .active {
+  color: #495c68;
+  background-color: #f5fafd;
+}
+
+.selectize-dropdown .active.create {
+  color: #495c68;
+}
+
+.selectize-dropdown .create {
+  color: rgba(48, 48, 48, 0.5);
+}
+
+.selectize-dropdown-content {
+  max-height: 200px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.selectize-control.single .selectize-input,
+.selectize-control.single .selectize-input input {
+  cursor: pointer;
+}
+
+.selectize-control.single .selectize-input.input-active,
+.selectize-control.single .selectize-input.input-active input {
+  cursor: text;
+}
+
+.selectize-control.single .selectize-input:after {
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  display: block;
+  width: 0;
+  height: 0;
+  margin-top: -3px;
+  border-color: #808080 transparent transparent transparent;
+  border-style: solid;
+  border-width: 5px 5px 0 5px;
+  content: ' ';
+}
+
+.selectize-control.single .selectize-input.dropdown-active:after {
+  margin-top: -4px;
+  border-color: transparent transparent #808080 transparent;
+  border-width: 0 5px 5px 5px;
+}
+
+.selectize-control.rtl.single .selectize-input:after {
+  right: auto;
+  left: 15px;
+}
+
+.selectize-control.rtl .selectize-input > input {
+  margin: 0 4px 0 -2px !important;
+}
+
+.selectize-control .selectize-input.disabled {
+  background-color: #fafafa;
+  opacity: 0.5;
+}
+
+.selectize-control.multi .selectize-input.has-items {
+  padding-right: 5px;
+  padding-left: 5px;
+}
+
+.selectize-control.multi .selectize-input.disabled [data-value] {
+  color: #999;
+  text-shadow: none;
+  background: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.selectize-control.multi .selectize-input.disabled [data-value],
+.selectize-control.multi .selectize-input.disabled [data-value] .remove {
+  border-color: #e6e6e6;
+}
+
+.selectize-control.multi .selectize-input.disabled [data-value] .remove {
+  background: none;
+}
+
+.selectize-control.multi .selectize-input [data-value] {
+  text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);
+  background-color: #1b9dec;
+  background-image: -moz-linear-gradient(top, #1da7ee, #178ee9);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#1da7ee), to(#178ee9));
+  background-image: -webkit-linear-gradient(top, #1da7ee, #178ee9);
+  background-image: -o-linear-gradient(top, #1da7ee, #178ee9);
+  background-image: linear-gradient(to bottom, #1da7ee, #178ee9);
+  background-repeat: repeat-x;
+  -webkit-border-radius: 3px;
+     -moz-border-radius: 3px;
+          border-radius: 3px;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1da7ee', endColorstr='#ff178ee9', GradientType=0);
+  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.03);
+          box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.03);
+}
+
+.selectize-control.multi .selectize-input [data-value].active {
+  background-color: #0085d4;
+  background-image: -moz-linear-gradient(top, #008fd8, #0075cf);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#008fd8), to(#0075cf));
+  background-image: -webkit-linear-gradient(top, #008fd8, #0075cf);
+  background-image: -o-linear-gradient(top, #008fd8, #0075cf);
+  background-image: linear-gradient(to bottom, #008fd8, #0075cf);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff008fd8', endColorstr='#ff0075cf', GradientType=0);
+}
+
+.selectize-control.single .selectize-input {
+  background-color: #f9f9f9;
+  background-image: -moz-linear-gradient(top, #fefefe, #f2f2f2);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fefefe), to(#f2f2f2));
+  background-image: -webkit-linear-gradient(top, #fefefe, #f2f2f2);
+  background-image: -o-linear-gradient(top, #fefefe, #f2f2f2);
+  background-image: linear-gradient(to bottom, #fefefe, #f2f2f2);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffefefe', endColorstr='#fff2f2f2', GradientType=0);
+  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
+          box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
+}
+
+.selectize-control.single .selectize-input,
+.selectize-dropdown.single {
+  border-color: #b8b8b8;
+}
+
+.selectize-dropdown .optgroup-header {
+  padding-top: 7px;
+  font-size: 0.85em;
+  font-weight: bold;
+}
+
+.selectize-dropdown .optgroup {
+  border-top: 1px solid #f0f0f0;
+}
+
+.selectize-dropdown .optgroup:first-child {
+  border-top: 0 none;
+}
\ No newline at end of file

From 63889f67e46efd127b5d71d03baf93f0cd7cbe84 Mon Sep 17 00:00:00 2001
From: dimirc <wlacoka@gmail.com>
Date: Sun, 24 Nov 2013 00:17:10 -0500
Subject: [PATCH 07/10] Refactor directives, using controller from uiSelect

---
 demo/index.html              |   7 +-
 src/select.js                | 202 ++++++++++++++++++++++-------------
 src/select2/choices.tpl.html |   2 +-
 src/select2/match.tpl.html   |   4 +-
 src/select2/select.tpl.html  |   2 +-
 5 files changed, 134 insertions(+), 83 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index fd112e367..a9d4b1815 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -4,11 +4,8 @@
     <meta charset="utf-8">
     <title>Angular ui-select</title>
 
-    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
+    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
 
-    <!-- https://github.com/angular-ui/ui-utils/blob/master/modules/keypress/keypress.js -->
-    <script src="keypress.js"></script>
-    
     <script src="../src/select.js"></script>
     <script src="demo.js"></script>
 
@@ -40,7 +37,7 @@
 
     <ui-select ng-model="data.custom" style="width:300px">
       <match placeholder="Pick one...">{{$select.selected.name}}</match>
-      <choices data="item in data.items | filter : $select.search">
+      <choices data="data.items | filter : $select.search">
           <div ng-bind-html="trustAsHtml((item.name | highlight:$select.search))"/></div>
           <div> {{item.email}} </div>
       </choices>
diff --git a/src/select.js b/src/select.js
index 314d06177..438aab077 100644
--- a/src/select.js
+++ b/src/select.js
@@ -1,4 +1,4 @@
-angular.module('ui.select', ['ui.keypress'])
+angular.module('ui.select', [])
 
 .constant('uiSelectConfig', {
   defaultTheme: 'select2',
@@ -13,75 +13,86 @@ angular.module('ui.select', ['ui.keypress'])
       return '../src/' + theme + '/select.tpl.html';
     },
     replace: true,
-    require: 'ngModel',
+    require: ['uiSelect', 'ngModel'],
     transclude: true,
     scope: true,
-    compile: function(tElement, tAttrs, transcludeFn) {
-      return function($scope, $elm, $attrs, ngModel){
-        transcludeFn($scope, function(clone) {
-          $scope.open = false;
+    controller: ['$scope', '$element', '$attrs',
+      function uiSelectCtrl($scope, $element, $attrs) {
+
+        var ctrl = this;
 
-          //Set transcluded elements to their correct position on template
-          var transcluded = angular.element('<div/>').append(clone);
-          var transMatch = uiSelectElements.byClassName(transcluded[0],'ui-select-match');
-          var transChoices = uiSelectElements.byClassName(transcluded[0],'ui-select-choices');
-          uiSelectElements.byClassName($elm[0],'ui-select-match').replaceWith(transMatch);
-          uiSelectElements.byClassName($elm[0],'ui-select-choices').replaceWith(transChoices);
-
-          var input = $elm.find('input');
-          $scope.activate = function($event){
-            if ($event) $event.stopPropagation(); // Prevent bubbling
-            $scope.open = true;
-            //Give it time to appear before focus
-            $timeout(function(){
-              input[0].focus();
-            });
-          };
-          $scope.$watch('$select.search', function(){
-            $scope.$select.index = 0;
+        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();
           });
-          $scope.up = function(){
-            if ($scope.$select.index > 0){
-              $scope.$select.index--;
-              $scope.ensureHighlightVisible();
-            }
-          };
-          $scope.down = function(){
-            items = uiSelectElements.byClassName($elm[0],'ui-select-choices-row').length -1;
-            if ($scope.$select.index < items) {
-              $scope.$select.index++;
-              $scope.ensureHighlightVisible();
-            } else {
-              $scope.$select.index = items;
-            }
-          };
-          $scope.$select = function(item){
-            $scope.$select.selected = item;
-            ngModel.$setViewValue(item);
-            ngModel.$render(item);
-            $scope.close();
-          };
-          $scope.close = function() {
-            $scope.open = false;
-            $scope.$select.search = "";
-          };
-          var dismissClickHandler = function (evt) {
-            if (angular.element(evt.target).hasClass('ui-select-search')){
-              return;
-            }
-            $scope.close();
-            $scope.$digest();
-          };
-          $document.bind('click', dismissClickHandler);
-        });
-      };
+        };
+
+        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
+
+    }],
+    controllerAs: 'uiSelectCtrl',
+    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){
+        ngModelCtrl.$setViewValue(newVal);
+      });
+
+      $document.bind('click', function (evt) {
+        if (angular.element(evt.target).hasClass('ui-select-search')){
+          return;
+        }
+        uiSelectCtrl.close(); //Close if clicking outside
+        scope.$digest();
+      });
+
+      //Move transcluded elements to their correct position on main template
+      transcludeFn(scope, function(clone) {
+
+        var transcluded = angular.element('<div/>').append(clone);
+
+        //Child directives could be uncompiled at this point, so we check both alternatives,
+        //first for compiled version (by class) or uncompiled (by tag). We place the directives
+        //at the insertion points that are marked with ui-select-* classes at select.tpl.html
+        //TODO: If we change directive restrict attribute to EA, we should do some changes here.
+
+        var transMatch = uiSelectElements.byClassName(transcluded[0],'ui-select-match');
+        transMatch = !transMatch.length ? transcluded.find('match') : transMatch;
+        uiSelectElements.byClassName(element[0],'ui-select-match').replaceWith(transMatch);
+
+        var transChoices = uiSelectElements.byClassName(transcluded[0],'ui-select-choices');
+        transChoices = !transChoices.length ? transcluded.find('choices') : transChoices;
+        uiSelectElements.byClassName(element[0],'ui-select-choices').replaceWith(transChoices);
+
+      });
+
     }
   };
 })
 
 .directive('choices', function($sce,uiSelectConfig,uiSelectElements) {
+  var HOT_KEYS = [9, 13, 27, 38, 40];
   return {
-    // require: '^uiSelect',
+    require: '^uiSelect',
     restrict: 'E',
     transclude: true,
     replace: true,
@@ -90,23 +101,71 @@ angular.module('ui.select', ['ui.keypress'])
       var theme = tElement[0].parentElement.getAttribute('theme') || uiSelectConfig.defaultTheme;
       return '../src/' + theme + '/choices.tpl.html';
     },
-    compile: function(tElement, tAttrs, transcludeFn) {
-      uiSelectElements.byClassName(tElement[0],'ui-select-choices-row').attr("ng-repeat", tAttrs.data);
-      return function(scope, element, attrs){
+    compile: function(tElement, tAttrs) {
+
+      uiSelectElements.byClassName(tElement[0],'ui-select-choices-row')
+        .attr("ng-repeat", 'item in ' + tAttrs.data)
+        .attr("ng-mouseenter", '$select.activeIdx=$index')
+        .attr("ng-click", 'uiSelectCtrl.select(item)');
+
+      return function(scope, element, attrs, uiSelectCtrl){
+
         scope.trustAsHtml = function(value) {
           return $sce.trustAsHtml(value);
         };
+
         var container = element.hasClass('ui-select-choices-content') ? element[0] : uiSelectElements.byClassName(element[0],'ui-select-choices-content')[0];
-        scope.ensureHighlightVisible = function(){
-          var highlighted = uiSelectElements.byClassName(element[0],'ui-select-choices-row')[scope.$select.index],
+        var ensureHighlightVisible = function(){
+          var rows = uiSelectElements.byClassName(element[0],'ui-select-choices-row');
+          if (!rows.length) return; //In case its empty
+          var highlighted = rows[scope.$select.activeIdx],
               posY = highlighted.offsetTop + highlighted.clientHeight - container.scrollTop,
               maxHeight = 200; //TODO Need to get this value from container.max-height 
-          if (posY>maxHeight){
+          if (posY > maxHeight){
             container.scrollTop += posY-maxHeight;
-          }else if (posY<highlighted.clientHeight){
+          }else if (posY < highlighted.clientHeight){
             container.scrollTop -= highlighted.clientHeight-posY;
           }
         };
+
+        scope.$watch('$select.search', function(){
+          scope.$select.activeIdx = 0;
+          ensureHighlightVisible();
+        });
+
+        //Bind keyboard events related to choices
+        uiSelectCtrl.input.bind('keydown', function (evt) {
+
+          if (HOT_KEYS.indexOf(evt.which) === -1) return; //Exit on regular key
+          evt.preventDefault();
+
+          var rows = uiSelectElements.byClassName(element[0],'ui-select-choices-row');
+
+          if (evt.which === 40) { // down(40)
+            if (scope.$select.activeIdx < rows.length) {
+              scope.$select.activeIdx = (scope.$select.activeIdx + 1) % rows.length || rows.length - 1 ;
+              ensureHighlightVisible();
+              scope.$digest();
+            }
+
+          } else if (evt.which === 38) { // up(38)
+            if (scope.$select.activeIdx > 0){
+              scope.$select.activeIdx--;
+              ensureHighlightVisible();
+              scope.$digest();
+            }
+
+          } else if (evt.which === 13 || evt.which === 9) { // enter(13) and tab(9)
+              rows[scope.$select.activeIdx].click();
+
+          } else if (evt.which === 27) { // esc(27)
+            evt.stopPropagation();
+            uiSelectCtrl.close();
+            scope.$digest();
+
+          }
+        });
+
       };
     }
   };
@@ -122,13 +181,8 @@ angular.module('ui.select', ['ui.keypress'])
       var theme = tElement[0].parentElement.getAttribute('theme') || uiSelectConfig.defaultTheme;
       return '../src/' + theme + '/match.tpl.html';
     },
-    compile: function(tElement, tAttrs, transcludeFn) {
-      return function($scope, $elm, $attrs, ngModel){
-        transcludeFn($scope, function(clone) {
-          $scope.placeholder = tAttrs.placeholder || uiSelectConfig.defaultPlaceholder;
-          $elm.append(clone);
-        });
-      };
+    link: function(scope, element, attrs){
+      scope.placeholder = attrs.placeholder || uiSelectConfig.defaultPlaceholder;
     }
   };
 })
diff --git a/src/select2/choices.tpl.html b/src/select2/choices.tpl.html
index 7e94367d9..0dd7b703a 100644
--- a/src/select2/choices.tpl.html
+++ b/src/select2/choices.tpl.html
@@ -1,5 +1,5 @@
 <ul class="ui-select-choices ui-select-choices-content select2-results">
-  <li class="ui-select-choices-row" ng-class="{'select2-highlighted':$select.index==$index}" ng-click="$select(item)" ng-mouseenter="$select.index=$index">
+  <li class="ui-select-choices-row" ng-class="{'select2-highlighted':$select.activeIdx==$index}">
     <div class="select2-result-label" ng-transclude></div>
   </li>
 </ul>
\ No newline at end of file
diff --git a/src/select2/match.tpl.html b/src/select2/match.tpl.html
index 0b50e4c9f..4576aa694 100644
--- a/src/select2/match.tpl.html
+++ b/src/select2/match.tpl.html
@@ -1,5 +1,5 @@
-<a class="ui-select-match select2-choice" ng-click="activate($event)">
+<a class="ui-select-match select2-choice" ng-click="uiSelectCtrl.activate($event)">
   <span class="select2-arrow"><b></b></span>
-  <span class="select2-chosen">{{selectedLabel}}</span>
 	<div ng-hide='$select.selected'>{{placeholder}}</div>
+  <div ng-transclude></div>
 </a>
\ No newline at end of file
diff --git a/src/select2/select.tpl.html b/src/select2/select.tpl.html
index 944e03be1..afc5d2116 100644
--- a/src/select2/select.tpl.html
+++ b/src/select2/select.tpl.html
@@ -2,7 +2,7 @@
   <div class="ui-select-match"></div>
   <div ng-class="{'select2-display-none':!open}" class="select2-drop select2-with-searchbox select2-drop-active">
     <div class="select2-search">
-      <input class="ui-select-search select2-input" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" ui-keydown="{up:'up()', down:'down()', esc:'close()', enter:'$select((data.items|filter: $select.search)[$select.index])'}" ng-model="$select.search">
+      <input class="ui-select-search select2-input" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" ng-model="$select.search">
     </div>
     <div class="ui-select-choices" />
   </div>

From 5ceb198e11ebc8eb87e9c9e27de16492e855291c Mon Sep 17 00:00:00 2001
From: dimirc <wlacoka@gmail.com>
Date: Sun, 24 Nov 2013 00:43:28 -0500
Subject: [PATCH 08/10] Setup initial test using ngHtml2JsPreprocessor

---
 bower.json          |  4 +--
 karma.conf.js       | 14 ++++++++--
 package.json        |  3 ++-
 test/select.spec.js | 66 ++++++++++++++++++++++++++++++++++++++++++---
 4 files changed, 78 insertions(+), 9 deletions(-)

diff --git a/bower.json b/bower.json
index 1846e1bb4..7bb89f14a 100644
--- a/bower.json
+++ b/bower.json
@@ -16,8 +16,8 @@
     "tests"
   ],
   "dependencies": {
-    "angular": "~1.0.8",
-    "angular-mocks": "~1.0.8",
+    "angular": "~1.2.0",
+    "angular-mocks": "~1.2.0",
     "jquery": "~2.0.3"
   }
 }
diff --git a/karma.conf.js b/karma.conf.js
index bce341aab..1e29efc71 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -14,11 +14,13 @@ module.exports = function(config) {
 
     // list of files / patterns to load in the browser
     files: [
-      'bower_components/jquery/jquery.js',
       'bower_components/angular/angular.js',
       'bower_components/angular-mocks/angular-mocks.js',
+      'bower_components/jquery/jquery.js',
+
       'src/select.js',
-      'test/**/*.spec.js'
+      'test/**/*.spec.js',
+      '**/*.tpl.html'
     ],
 
 
@@ -27,6 +29,14 @@ module.exports = function(config) {
       
     ],
 
+    preprocessors: {
+      '**/*.tpl.html': ['ng-html2js']
+    },
+
+    ngHtml2JsPreprocessor: {
+      // stripPrefix: 'public/',
+      prependPrefix: '../'
+    },
 
     // test results reporter to use
     // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
diff --git a/package.json b/package.json
index 4a8c2aff1..f07972f9f 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
     "karma-firefox-launcher": "~0.1.0",
     "karma-jasmine": "~0.1.3",
     "karma-phantomjs-launcher": "~0.1.0",
-    "grunt-conventional-changelog": "~1.0.0"
+    "grunt-conventional-changelog": "~1.0.0",
+    "karma-ng-html2js-preprocessor": "~0.1.0"
   },
   "scripts": {
     "test": "grunt test"
diff --git a/test/select.spec.js b/test/select.spec.js
index 6fd2b4f84..6fec05b0a 100644
--- a/test/select.spec.js
+++ b/test/select.spec.js
@@ -1,5 +1,63 @@
-describe('select', function() {
-  it('', function() {
-  });
-});
+describe('ui-select tests', function() {
 
+    var scope, $rootScope, $compile;
+
+    beforeEach(module('ui.select'));
+    beforeEach(module('../src/select2/choices.tpl.html'));
+    beforeEach(module('../src/select2/match.tpl.html'));
+    beforeEach(module('../src/select2/select.tpl.html'));
+    beforeEach(inject(function(_$rootScope_, _$compile_) {
+        $rootScope = _$rootScope_;
+        scope = $rootScope.$new();
+        $compile = _$compile_;
+        scope.matches = [
+          {"id": 1, "name": "Wladimir Coka", "email": "wcoka@email.com" },
+          {"id": 2, "name": "Samantha Smith", "email": "sam@email.com" },
+          {"id": 3, "name": "Estefanía Smith", "email": "esmith@email.com" },
+          {"id": 4, "name": "Natasha Jones", "email": "ncoka@email.com" },
+          {"id": 5, "name": "Nicole Smith", "email": "nicky@email.com" }
+        ];
+    }));
+
+    //Utility functions
+    var prepareUiSelectEl = function(inputTpl) {
+        var el = $compile(angular.element(inputTpl))(scope);
+        scope.$digest();
+        return el;
+    };
+
+    var uiSelectElInstance1 = function(inputTpl) {
+      var element = prepareUiSelectEl(
+        '<ui-select ng-model="selection" style="width:300px"> \
+          <match placeholder="Pick one...">{{$select.selected.name}}</match> \
+          <choices data="matches | filter : $select.search"> \
+              <div ng-bind-html="trustAsHtml((item.name | highlight:$select.search))"/></div> \
+              <div> {{item.email}} </div> \
+          </choices> \
+        </ui-select> \
+        ');
+        return element;
+    };
+
+    it('should compile child directives', function() {
+
+        var el = uiSelectElInstance1();
+
+        var searchEl = $(el).find('.ui-select-search');
+        expect(searchEl.length).toEqual(1);
+
+        var matchEl = $(el).find('.ui-select-match');
+        expect(matchEl.length).toEqual(1);
+
+        var choicesContentEl = $(el).find('.ui-select-choices-content');
+        expect(choicesContentEl.length).toEqual(1);
+
+        var choicesContainerEl = $(el).find('.ui-select-choices');
+        expect(choicesContainerEl.length).toEqual(1);
+
+        var choicesElems = $(el).find('.ui-select-choices-row');
+        expect(choicesElems.length).toEqual(5);
+
+    });
+
+});
\ No newline at end of file

From 1bfcdfe3be4f1b9504679af90c52ce507c35d18e Mon Sep 17 00:00:00 2001
From: dimirc <wlacoka@gmail.com>
Date: Sun, 24 Nov 2013 21:06:19 -0500
Subject: [PATCH 09/10] Render intial state correctly

Fixes #12
---
 src/select.js       |  6 +++++-
 test/select.spec.js | 11 +++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/select.js b/src/select.js
index 438aab077..1ffa8eabc 100644
--- a/src/select.js
+++ b/src/select.js
@@ -54,9 +54,13 @@ angular.module('ui.select', [])
       var ngModelCtrl = controllers[1];
 
       scope.$watch('$select.selected',function(newVal,oldVal){
-        ngModelCtrl.$setViewValue(newVal);
+        if (ngModelCtrl.$viewValue != newVal) ngModelCtrl.$setViewValue(newVal);
       });
 
+      ngModelCtrl.$render = function() {
+        scope.$select.selected = ngModelCtrl.$viewValue;
+      };
+
       $document.bind('click', function (evt) {
         if (angular.element(evt.target).hasClass('ui-select-search')){
           return;
diff --git a/test/select.spec.js b/test/select.spec.js
index 6fec05b0a..edca61853 100644
--- a/test/select.spec.js
+++ b/test/select.spec.js
@@ -60,4 +60,15 @@ describe('ui-select tests', function() {
 
     });
 
+    it('should correctly render initial state', function () {
+
+      scope.selection = scope.matches[0];
+
+      var el = uiSelectElInstance1();
+      var matchLabel = $('.ui-select-match > div[ng-transclude]', el).text();
+
+      expect(matchLabel).toEqual('Wladimir Coka');
+
+    });
+
 });
\ No newline at end of file

From aef4eaa628816a14bd03efea848bb9bd9cb79fbe Mon Sep 17 00:00:00 2001
From: dimirc <wlacoka@gmail.com>
Date: Tue, 17 Dec 2013 23:33:12 -0500
Subject: [PATCH 10/10] Update README demo

---
 README.md | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 9dd8c77bf..8610ed2f9 100644
--- a/README.md
+++ b/README.md
@@ -3,19 +3,14 @@ ui-select [![Build Status](https://travis-ci.org/angular-ui/ui-select.png)](http
 
 A native version of select2.
 
-Requires ui.keypress from ui-utils
-
-
 ### Prototype usage:
 
 ```html
-<ui-select ng-model="data.custom">
-  <li 
-    ng-repeat="item in data.items | filter : $search" 
-    ng-class="{highlight:highlight==$index}" 
-    ng-click="$select(item)" 
-    ng-mouseover="$parent.highlight=$index">
-    <h4>{{item.title}}</h4>
-  </li>
+<ui-select ng-model="data.custom" style="width:300px">
+  <match placeholder="Pick one...">{{$select.selected.name}}</match>
+  <choices data="data.items | filter : $select.search">
+      <div ng-bind-html="trustAsHtml((item.name | highlight:$select.search))"/></div>
+      <div> {{item.email}} </div>
+  </choices>
 </ui-select>
 ```