fix problems with several example files in docs

.gitignore

@@ -4,3 +4,4 @@
 /.idea
 /.tmp
 .DS_Store
+*~

docs/assets/demo.js

@@ -14,7 +14,7 @@ app.filter('propsFilter', function() {
 
     if (angular.isArray(items)) {
       var keys = Object.keys(props);
-        
+
       items.forEach(function(item) {
         var itemMatches = false;
 

docs/examples/demo-append-to-body.html

@@ -1,4 +1,4 @@
-  <button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>
+  <button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>
   <button class="btn btn-default btn-xs" ng-click="ctrl.disable()">Disable ui-select</button>
   <button class="btn btn-default btn-xs" ng-click="ctrl.appendToBodyDemo.startToggleTimer()"
           ng-disabled="ctrl.appendToBodyDemo.remainingTime">
@@ -13,7 +13,7 @@ <h3>Bootstrap theme</h3>
                theme="bootstrap"
                ng-disabled="ctrl.disabled"
                reset-search-input="false"
-               style="width: 300px;"
+               style="width: 600px;"
                title="Choose an address"
                append-to-body="true">
       <ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>

docs/examples/demo-basic.html

@@ -1,4 +1,4 @@
-  <button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>
+  <button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>
   <button class="btn btn-default btn-xs" ng-click="ctrl.disable()">Disable ui-select</button>
   <button class="btn btn-default btn-xs" ng-click="ctrl.clear()">Clear ng-model</button>
 
@@ -8,7 +8,7 @@ <h3>Bootstrap theme <small>(remote data source)</small></h3>
              theme="bootstrap"
              ng-disabled="ctrl.disabled"
              reset-search-input="false"
-             style="width: 300px;"
+             style="width: 600px;"
              title="Choose an address">
     <ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
     <ui-select-choices repeat="address in ctrl.addresses track by $index"

docs/examples/demo-group-filter.html

@@ -1,4 +1,4 @@
-  <button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>
+  <button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>
   <button class="btn btn-default btn-xs" ng-click="ctrl.disable()">Disable ui-select</button>
   <button class="btn btn-default btn-xs" ng-click="ctrl.clear()">Clear ng-model</button>
 
@@ -16,10 +16,10 @@ <h3> Filter groups by array <small><code>group-filter="['Z','B','C']"</code></sm
     </ui-select-choices>
   </ui-select>
 
-  <h3>Filter groups using a function <small><code>group-filter="reverseOrderFilterFn"</code></small></h3>
+  <h3>Filter groups using a function <small><code>group-filter="ctrl.reverseOrderFilterFn"</code></small></h3>
   <ui-select ng-model="ctrl.country.selected" theme="select2" ng-disabled="ctrl.disabled" style="width: 300px;" title="Choose a country">
     <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
-    <ui-select-choices group-by="ctrl.firstLetterGroupFn" group-filter="reverseOrderFilterFn" repeat="country in ctrl.countries | filter: $select.search">
+    <ui-select-choices group-by="ctrl.firstLetterGroupFn" group-filter="ctrl.reverseOrderFilterFn" repeat="country in ctrl.countries | filter: $select.search">
       <span ng-bind-html="country.name | highlight: $select.search"></span>
       <small ng-bind-html="country.code | highlight: $select.search"></small>
     </ui-select-choices>

docs/examples/demo-multiple-selection.html

@@ -1,4 +1,4 @@
-  <button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>
+  <button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>
   <button class="btn btn-default btn-xs" ng-click="ctrl.disable()">Disable ui-select</button>
   <button class="btn btn-default btn-xs" ng-click="ctrl.clear()">Clear ng-model</button>
 
@@ -11,7 +11,7 @@ <h3>Array of strings</h3>
       {{color}}
     </ui-select-choices>
   </ui-select>
-  <p>Selected: {{multipleDemo.colors}}</p>
+  <p>Selected: {{ctrl.multipleDemo.colors}}</p>
   <hr>
   <h3>Array of objects (sorting enabled)</h3>
   <ui-select multiple ng-model="ctrl.multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="ctrl.disabled" sortable="true" close-on-select="false" style="width: 800px;">
@@ -24,11 +24,11 @@ <h3>Array of objects (sorting enabled)</h3>
       </small>
     </ui-select-choices>
   </ui-select>
-  <p>Selected: {{multipleDemo.selectedPeople}}</p>
+  <p>Selected: {{ctrl.multipleDemo.selectedPeople}}</p>
 
   <hr>
   <h3>Deselect callback with single property binding</h3>
-  <ui-select multiple ng-model="ctrl.multipleDemo.deSelectedPeople" on-remove="removed($item, $model)" theme="bootstrap" ng-disabled="ctrl.disabled" close-on-select="false" style="width: 800px;" title="Choose a person">
+  <ui-select multiple ng-model="ctrl.multipleDemo.deSelectedPeople" on-remove="ctrl.removed($item, $model)" theme="bootstrap" ng-disabled="ctrl.disabled" close-on-select="false" style="width: 800px;" title="Choose a person">
     <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
     <ui-select-choices repeat="person.email as person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>
@@ -56,21 +56,21 @@ <h3>Array of objects with single property binding</h3>
       </small>
     </ui-select-choices>
   </ui-select>
-  <p>Selected: {{multipleDemo.selectedPeopleSimple}}</p>
+  <p>Selected: {{ctrl.multipleDemo.selectedPeopleSimple}}</p>
 
   <hr>
   <h3>Array of objects (with groupBy)</h3>
   <ui-select multiple ng-model="ctrl.multipleDemo.selectedPeopleWithGroupBy" theme="bootstrap" ng-disabled="ctrl.disabled" close-on-select="false" style="width: 800px;" title="Choose a person">
     <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
-    <ui-select-choices group-by="someGroupFn" repeat="person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
+    <ui-select-choices group-by="ctrl.someGroupFn" repeat="person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>
       <small>
         email: {{person.email}}
         age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
       </small>
     </ui-select-choices>
   </ui-select>
-  <p>Selected: {{multipleDemo.selectedPeopleWithGroupBy}}</p>
+  <p>Selected: {{ctrl.multipleDemo.selectedPeopleWithGroupBy}}</p>
 
   <hr>
   <h3>Disabling instead of removing selected items</h3>
@@ -84,6 +84,6 @@ <h3>Disabling instead of removing selected items</h3>
       </small>
     </ui-select-choices>
   </ui-select>
-  <p>Selected: {{multipleDemo.removeSelectIsFalse}}</p>
+  <p>Selected: {{ctrl.multipleDemo.removeSelectIsFalse}}</p>
 
   <div style="height:500px"></div>

docs/examples/demo-object-as-source.html

@@ -1,4 +1,4 @@
-
+
   <button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>
   <button class="btn btn-default btn-xs" ng-click="ctrl.disable()">Disable ui-select</button>
   <button class="btn btn-default btn-xs" ng-click="ctrl.clear()">Clear ng-model</button>
@@ -11,11 +11,11 @@ <h3>Using value for binding</h3>
   <p>Selected: <code>{{ctrl.person.selectedValue}}</code></p>
   <ui-select ng-model="ctrl.person.selectedValue" theme="select2" ng-disabled="ctrl.disabled" style="min-width: 300px;" title="Choose a person">
     <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.value.name}}</ui-select-match>
-    <ui-select-choices repeat="person.value as (key, person) in ctrl.peopleObj | filter: { value : { name: $select.search }}">
+	 <ui-select-choices repeat="person.value as (key, person) in ctrl.peopleObj | filter: { value: { name: $select.search }}">
       <div ng-bind-html="person.value.name | highlight: $select.search"></div>
       <small>
         email: {{person.value.email}}
-        age: <span ng-bind-html="''+person.value.age | highlight: $select.search"></span>
+        age: {{person.value.age}}
       </small>
     </ui-select-choices>
   </ui-select>
@@ -24,11 +24,11 @@ <h3>Using single property for binding</h3>
   <p>Selected: <code>{{ctrl.person.selectedSingle}}</code></p>
   <ui-select ng-model="ctrl.person.selectedSingle" theme="select2" ng-disabled="ctrl.disabled" style="min-width: 300px;" title="Choose a person">
     <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.value.name}}</ui-select-match>
-    <ui-select-choices repeat="person.value.name as (key, person) in ctrl.peopleObj | filter: { value : { name: $select.search }}">
+    <ui-select-choices repeat="person.value.name as (key, person) in ctrl.peopleObj | filter: { value: { name: $select.search }}">
       <div ng-bind-html="person.value.name | highlight: $select.search"></div>
       <small>
         email: {{person.value.email}}
-        age: <span ng-bind-html="''+person.value.age | highlight: $select.search"></span>
+        age: {{person.value.age}}
       </small>
     </ui-select-choices>
   </ui-select>
@@ -37,11 +37,11 @@ <h3>Using key for binding</h3>
   <p>Selected: <code>{{ctrl.person.selectedSingleKey}}</code></p>
   <ui-select ng-model="ctrl.person.selectedSingleKey" theme="select2" ng-disabled="ctrl.disabled" style="min-width: 300px;" title="Choose a person">
     <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.value.name}}</ui-select-match>
-    <ui-select-choices repeat="person.key as (key, person) in ctrl.peopleObj | filter: { value : { name: $select.search }}">
+    <ui-select-choices repeat="person.key as (key, person) in ctrl.peopleObj | filter: { value: { name: $select.search }}">
       <div ng-bind-html="person.value.name | highlight: $select.search"></div>
       <small>
         email: {{person.value.email}}
-        age: <span ng-bind-html="''+person.value.age | highlight: $select.search"></span>
+        age: {{person.value.age}}
       </small>
     </ui-select-choices>
   </ui-select>

docs/examples/demo-select2-with-bootstrap.html

@@ -1,4 +1,4 @@
-  <p>Selected: {{ctrl.person.selected.name}}</p>
+  <p>Selected: {{ctrl.person.selected.name}}</p>
 
   <form class="form-horizontal">
     <fieldset>
@@ -23,7 +23,7 @@
         <label class="col-sm-3 control-label">Multiple</label>
         <div class="col-sm-6">
 
-          <ui-select multiple sortable="true" ng-model="ctrl.person.selected" theme="select2" class="form-control" title="Choose a person">
+          <ui-select multiple sortable="true" ng-model="ctrl.multipleDemo.selectedPeople" theme="select2" class="form-control" title="Choose a person">
             <ui-select-match placeholder="Select or search a person in the list...">{{$item.name}}</ui-select-match>
             <ui-select-choices repeat="item in ctrl.people | filter: $select.search">
               <div ng-bind-html="item.name | highlight: $select.search"></div>
@@ -40,7 +40,7 @@
 
           <ui-select ng-model="ctrl.person.selected" theme="select2" class="form-control" title="Choose a person">
             <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
-            <ui-select-choices group-by="'group'" repeat="item in ctrl.people | filter: $select.search">
+            <ui-select-choices group-by="'country'" repeat="item in ctrl.people | filter: $select.search">
               <span ng-bind-html="item.name | highlight: $select.search"></span>
               <small ng-bind-html="item.email | highlight: $select.search"></small>
             </ui-select-choices>
@@ -88,4 +88,4 @@
       </div>
 
     </fieldset>
-  </form>
+  </form>

docs/examples/demo-selectize-with-bootstrap.html

@@ -1,4 +1,4 @@
-  <style>
+  <style>
     body {
       padding: 15px;
     }
@@ -45,7 +45,7 @@
 
           <ui-select ng-model="ctrl.person.selected" theme="selectize" title="Choose a person">
             <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
-            <ui-select-choices group-by="'group'" repeat="item in ctrl.people | filter: $select.search">
+            <ui-select-choices group-by="'country'" repeat="item in ctrl.people | filter: $select.search">
               <span ng-bind-html="item.name | highlight: $select.search"></span>
               <small ng-bind-html="item.email | highlight: $select.search"></small>
             </ui-select-choices>

docs/examples/demo-tagging.html

@@ -1,4 +1,4 @@
-
+
   <button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>
   <button class="btn btn-default btn-xs" ng-click="ctrl.disable()">Disable ui-select</button>
   <button class="btn btn-default btn-xs" ng-click="ctrl.clear()">Clear ng-model</button>
@@ -45,7 +45,7 @@ <h3>Object Tags <small>(with grouping)</small></h3>
   <hr>
 
   <h3>Object Tags with Tokenization <small>("<code>&nbsp;</code>", <code>/</code>, <code>,</code>)</small></h3>
-  <strong>Note that the Space character can't be used literally, use the keyword SPACE</strong>
+  <strong>Note that the Space character can't be used literally, use the keyword SPACE - <code>tagging-tokens="SPACE|,|/"</code></strong>
   <ui-select multiple tagging="ctrl.tagTransform" tagging-tokens="SPACE|,|/" ng-model="ctrl.multipleDemo.selectedPeople2" theme="bootstrap" ng-disabled="ctrl.disabled" style="width: 800px;" title="Choose a person">
     <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
     <ui-select-choices repeat="person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
@@ -58,9 +58,9 @@ <h3>Object Tags with Tokenization <small>("<code>&nbsp;</code>", <code>/</code>,
     </ui-select-choices>
   </ui-select>
   <p>Selected: </p>
-  <pre>selectedPeople = {{ctrl.multipleDemo.selectedPeople | json}}</pre>
+  <pre>selectedPeople2 = {{ctrl.multipleDemo.selectedPeople2 | json}}</pre>
 
-  <h3>Tagging in Single Select mode</h3>
+  <h3>Tagging in Single Select mode</h3>(NOT WORKING)
   <ui-select tagging="ctrl.tagTransform" ng-model="ctrl.person.selected" theme="bootstrap" ng-disabled="ctrl.disabled" style="width: 800px;" title="Choose a person">
   <ui-select-match placeholder="Select person...">{{$select.selected.name}} &lt;{{$select.selected.email}}&gt;</ui-select-match>
   <ui-select-choices repeat="person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
@@ -75,7 +75,7 @@ <h3>Tagging in Single Select mode</h3>
   <p>Selected:</p>
   <pre>ctrl.person.selected = {{ctrl.person.selected | json }}</pre>
 
-  <h3>Tagging in Single select mode, with simple strings</h3>
+  <h3>Tagging in Single select mode, with simple strings</h3>(NOT WORKING)
   <ui-select tagging tagging-label="('new')" ng-model="ctrl.singleDemo.color" theme="bootstrap" style="width: 800px;" title="Choose a color">
     <ui-select-match placeholder="Select color...">{{$select.selected}}</ui-select-match>
     <ui-select-choices repeat="color in ctrl.availableColors | filter: $select.search">

gulpfile.js

@@ -170,6 +170,7 @@ gulp.task('docs:assets', function () {
 });
 
 gulp.task('docs:examples', function () {
+  // Need a way to reset filename list: $.filenames('exampleFiles',{overrideMode:true});
   return gulp.src(['docs/examples/*.html'])
     .pipe($.header(fs.readFileSync('docs/partials/_header.html')))
     .pipe($.footer(fs.readFileSync('docs/partials/_footer.html')))
@@ -185,11 +186,15 @@ gulp.task('docs:index', function () {
     return '<h4><a href="./' + filename + '">' + cleaned + '</a> <plnkr-opener example-path="' + filename + '"></plnkr-opener></h4>';
   });
 
-  return gulp.src('docs/index.html')    
-    .pipe($.replace('<!-- INSERT EXAMPLES HERE -->', exampleFiles.join("\n")))        
+  return gulp.src('docs/index.html')
+    .pipe($.replace('<!-- INSERT EXAMPLES HERE -->', exampleFiles.join("\n")))
     .pipe(gulp.dest('./docs-built/'));
 });
 
+gulp.task('docs:watch', ['docs'], function() {
+  gulp.watch(['docs/**/*.{js,html}'], ['docs']);
+});
+
 var handleError = function (err) {
   console.log(err.toString());
   this.emit('end');