Improve documentation and demo

Author: tkrotoff

README.md

@@ -3,12 +3,12 @@
 AngularJS-native version of [Select2](http://ivaynberg.github.io/select2/) and [Selectize](http://brianreavis.github.io/selectize.js/).
 
 - [Basic demo](http://plnkr.co/edit/GtOOWE?p=preview)
-- [Select2 Bootstrap 3 demo](http://plnkr.co/edit/L8BdYv?p=preview)
+- [Bootstrap theme](http://plnkr.co/edit/7Fpbtg?p=preview)
 
 ## Features
 
 - Search and select
-- Support themes from Select2 (default theme) and Selectize (default, Bootstrap 2 & 3 themes)
+- Available themes: Bootstrap, Select2 and Selectize
 - Keyboard support
 - jQuery not required (except for old browsers)
 - Small code base: 250 lines of JavaScript vs 20 KB for select2.min.js
@@ -37,6 +37,13 @@ Bower:
 [cdnjs](http://cdnjs.com/):
 - `<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">`
 
+Configuration:
+```JavaScript
+app.config(function(uiSelectConfig) {
+  uiSelectConfig.theme = 'select2';
+});
+```
+
 ### Selectize theme
 
 Bower:
@@ -47,6 +54,32 @@ Bower:
 [cdnjs](http://cdnjs.com/):
 - `<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">`
 
+Configuration:
+```JavaScript
+app.config(function(uiSelectConfig) {
+  uiSelectConfig.theme = 'selectize';
+});
+```
+
+### Bootstrap theme
+
+If you already use Bootstrap, this theme will save you a lot of CSS code compared to the Select2 and Selectize themes.
+
+Bower:
+- `bower install bootstrap`
+- `<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">`
+- Or the [LESS](http://lesscss.org/) version: `@import "bower_components/bootstrap/less/bootstrap.less";`
+
+[Bootstrap CDN](http://www.bootstrapcdn.com/):
+- `<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">`
+
+Configuration:
+```JavaScript
+app.config(function(uiSelectConfig) {
+  uiSelectConfig.theme = 'bootstrap';
+});
+```
+
 ## Run the tests
 
 Install [Node.js](http://nodejs.org/), then inside a console:

examples/demo.html

@@ -19,6 +19,7 @@
   <![endif]-->
 
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
+  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
 
   <!-- ui-select files -->
   <script src="../dist/select.js"></script>
@@ -39,9 +40,12 @@
 
   <style>
     body {
-      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-      font-size: 14px;
-      color: #333;
+      padding: 15px;
+    }
+
+    .select2 > .select2-choice.ui-select-match {
+      /* Because of the inclusion of Bootstrap */
+      height: 29px;
     }
 
     .selectize-control > .selectize-dropdown {
@@ -55,14 +59,15 @@
 
   <p>Selected: {{person.selected.name}}</p>
 
-  <p>Select2 theme (default):</p>
-  <ui-select ng-model="person.selected" style="width: 300px;">
+  <p>Select2 theme:</p>
+  <ui-select ng-model="person.selected" theme="select2" style="width: 300px;">
     <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
     <choices repeat="item in people | filter: $select.search">
       <div ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></div>
       <small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
     </choices>
   </ui-select>
+  <br><br>
 
   <p>Selectize theme:</p>
   <ui-select ng-model="person.selected" theme="selectize" style="width: 300px;">
@@ -72,5 +77,15 @@
       <small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
     </choices>
   </ui-select>
+  <br>
+
+  <p>Bootstrap theme:</p>
+  <ui-select ng-model="person.selected" theme="bootstrap" style="width: 300px;">
+    <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
+    <choices repeat="item in people | filter: $select.search">
+      <div ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></div>
+      <small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
+    </choices>
+  </ui-select>
 </body>
 </html>

examples/demo.js

@@ -1,10 +1,6 @@
 'use strict';
 
 angular.module('demo', ['ui.select'])
-  .config(function(uiSelectConfig) {
-    // uiSelectConfig.defaultTheme = 'select2';
-    // uiSelectConfig.defaultTheme = 'selectize';
-  })
   .controller('MainCtrl', ['$scope', function ($scope) {
     $scope.person = {};
     $scope.people = [