Ensure examples use ui-select title attribute

Author: Andrew Eisenberg

examples/demo-bind-to-single-property-async.html

@@ -65,7 +65,7 @@
   <h3>Select2 theme</h3>
   <h4>Single property binding with async data</h4>
   <p>Selected: {{personAsync.selected}}</p>
-  <ui-select ng-model="personAsync.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
+  <ui-select ng-model="personAsync.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;" title="Single property binding with async data">
     <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name || $select.selected}}</ui-select-match>
     <ui-select-choices repeat="person.email as person in peopleAsync | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>

examples/demo-bind-to-single-property.html

@@ -64,7 +64,7 @@
 
   <h3>Select2 theme</h3>
   <p>Selected: {{person.selected}}</p>
-  <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
+  <ui-select ng-model="person.selected" theme="select2" ng-disabled="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.name}}</ui-select-match>
     <ui-select-choices repeat="person.email as person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>

examples/demo-disable-search.html

@@ -65,7 +65,7 @@
 
   <h3>Bootstrap theme</h3>
   <p>Selected: {{person.selected}}</p>
-  <ui-select ng-model="person.selected" theme="bootstrap" search-enabled="searchEnabled" ng-disabled="disabled" style="min-width: 300px;">
+  <ui-select ng-model="person.selected" theme="bootstrap" search-enabled="searchEnabled" ng-disabled="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.name}}</ui-select-match>
     <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>

examples/demo-event-on-select.html

@@ -64,7 +64,7 @@
 
   <h3>Select2 theme</h3>
   <p>Selected: {{person.selected}}</p>
-  <ui-select ng-model="person.selected" theme="select2" on-select="someFunction($item, $model)" ng-disabled="disabled" style="min-width: 300px;">
+  <ui-select ng-model="person.selected" theme="select2" on-select="someFunction($item, $model)" ng-disabled="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.name}}</ui-select-match>
     <ui-select-choices repeat="person.email as person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>
@@ -79,7 +79,7 @@ <h3>Select2 theme</h3>
   <br>
   <br>
   <h1>Event Result</h1>
-  Called <b>{{counter+0}}</b> times selected
+  Called <strong>{{counter+0}}</strong> times selected
   <div>item = {{eventResult.item}}</div>
   <div>model = {{eventResult.model}}</div>
 </body>

examples/demo-groupby.html

@@ -66,7 +66,7 @@ <h3>Select2 theme</h3>
   <p>Selected: {{person.selected}}</p>
 
   <h2>Grouped using a string (group-by="'country'")</h2>
-  <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
+  <ui-select ng-model="person.selected" theme="select2" ng-disabled="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.name}}</ui-select-match>
     <ui-select-choices group-by="'country'" repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>
@@ -78,7 +78,7 @@ <h2>Grouped using a string (group-by="'country'")</h2>
     </ui-select>
 
   <h2>Grouped using a function (group-by="someGroupFn")</h2>
-  <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
+  <ui-select ng-model="person.selected" theme="select2" ng-disabled="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.name}}</ui-select-match>
     <ui-select-choices group-by="someGroupFn" repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>
@@ -90,7 +90,7 @@ <h2>Grouped using a function (group-by="someGroupFn")</h2>
     </ui-select>
 
   <h2>Simple (no groupBy)</h2>
-  <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
+  <ui-select ng-model="person.selected" theme="select2" ng-disabled="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.name}}</ui-select-match>
     <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>

examples/demo-multi-select.html

@@ -113,7 +113,7 @@ <h3>Multi select</h3>
   <h1>Multi Selection Demos</h1>
 
   <h3>Array of strings</h3>
-  <ui-select multiple ng-model="multipleDemo.colors" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 300px;">
+  <ui-select multiple ng-model="multipleDemo.colors" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 300px;" title="Choose a color">
     <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
     <ui-select-choices repeat="color in availableColors | filter:$select.search">
       {{color}}
@@ -136,7 +136,7 @@ <h3>Array of objects</h3>
 
   <hr>
   <h3>Deselect callback with single property binding</h3>
-  <ui-select multiple ng-model="multipleDemo.deSelectedPeople" on-remove="removed($item, $model)" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 800px;">
+  <ui-select multiple ng-model="multipleDemo.deSelectedPeople" on-remove="removed($item, $model)" theme="bootstrap" ng-disabled="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 people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>
@@ -151,7 +151,7 @@ <h3>Deselect callback with single property binding</h3>
 
   <hr>
   <h3>Array of objects with single property binding</h3>
-  <ui-select multiple ng-model="multipleDemo.selectedPeopleSimple" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 800px;">
+  <ui-select multiple ng-model="multipleDemo.selectedPeopleSimple" theme="bootstrap" ng-disabled="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 people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>
@@ -165,7 +165,7 @@ <h3>Array of objects with single property binding</h3>
 
   <hr>
   <h3>Array of objects (with groupBy)</h3>
-  <ui-select multiple ng-model="multipleDemo.selectedPeopleWithGroupBy" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 800px;">
+  <ui-select multiple ng-model="multipleDemo.selectedPeopleWithGroupBy" theme="bootstrap" ng-disabled="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 people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>

examples/demo-tagging.html

@@ -66,7 +66,7 @@ <h1>Tagging Demos</h1>
 
   <h3>Simple String Tags</h3>
   <h4>(With Custom Tag Label)</h4>
-  <ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors" theme="bootstrap" ng-disabled="disabled" style="width: 300px;">
+  <ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors" theme="bootstrap" ng-disabled="disabled" style="width: 300px;" title="Choose a color">
     <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
     <ui-select-choices repeat="color in availableColors | filter:$select.search">
       {{color}}
@@ -77,7 +77,7 @@ <h4>(With Custom Tag Label)</h4>
 
   <h3>Simple String Tags </h3>
   <h4>(Predictive Search Model / No Labels)</h4>
-  <ui-select multiple tagging tagging-label="false" ng-model="multipleDemo.colors2" theme="bootstrap" ng-disabled="disabled" style="width: 300px;">
+  <ui-select multiple tagging tagging-label="false" ng-model="multipleDemo.colors2" theme="bootstrap" ng-disabled="disabled" style="width: 300px;" title="Choose a color">
     <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
     <ui-select-choices repeat="color in availableColors | filter:$select.search">
       {{color}}
@@ -87,7 +87,7 @@ <h4>(Predictive Search Model / No Labels)</h4>
   <hr>
 
   <h3>Object Tags</h3>
-  <ui-select multiple tagging="tagTransform" ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="disabled" style="width: 800px;">
+  <ui-select multiple tagging="tagTransform" ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="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 people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-if="person.isTag" ng-bind-html="person.name +' <small>(new)</small>'| highlight: $select.search"></div>
@@ -103,7 +103,7 @@ <h3>Object Tags</h3>
 
   <h3>Object Tags with Tokenization (Space, Forward Slash, Comma)</h3>
   <strong>Note that the SPACE character can't be used literally, use the keyword SPACE</strong>
-  <ui-select multiple tagging="tagTransform" tagging-tokens="SPACE|,|/" ng-model="multipleDemo.selectedPeople2" theme="bootstrap" ng-disabled="disabled" style="width: 800px;">
+  <ui-select multiple tagging="tagTransform" tagging-tokens="SPACE|,|/" ng-model="multipleDemo.selectedPeople2" theme="bootstrap" ng-disabled="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 people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-if="person.isTag" ng-bind-html="person.name + ' ' + $select.taggingLabel | highlight: $select.search"></div>

examples/demo.html

@@ -68,7 +68,8 @@ <h3>Bootstrap theme</h3>
              theme="bootstrap"
              ng-disabled="disabled"
              reset-search-input="false"
-             style="width: 300px;">
+             style="width: 300px;"
+             title="Choose an address">
     <ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
     <ui-select-choices repeat="address in addresses track by $index"
              refresh="refreshAddresses($select.search)"
@@ -79,7 +80,7 @@ <h3>Bootstrap theme</h3>
 
   <h3>Select2 theme</h3>
   <p>Selected: {{person.selected}}</p>
-  <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
+  <ui-select ng-model="person.selected" theme="select2" ng-disabled="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.name}}</ui-select-match>
     <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>
@@ -92,7 +93,7 @@ <h3>Select2 theme</h3>
 
   <h3>Selectize theme</h3>
   <p>Selected: {{country.selected}}</p>
-  <ui-select ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;">
+  <ui-select ng-model="country.selected" theme="selectize" ng-disabled="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 repeat="country in countries | filter: $select.search">
       <span ng-bind-html="country.name | highlight: $select.search"></span>

examples/select2-bootstrap3.html

@@ -53,7 +53,7 @@
         <label class="col-sm-3 control-label">Default</label>
         <div class="col-sm-6">
 
-          <ui-select ng-model="person.selected" theme="select2" class="form-control">
+          <ui-select ng-model="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 repeat="item in people | filter: $select.search">
               <div ng-bind-html="item.name | highlight: $select.search"></div>
@@ -68,7 +68,7 @@
         <label class="col-sm-3 control-label">Grouped</label>
         <div class="col-sm-6">
 
-          <ui-select ng-model="person.selected" theme="select2" class="form-control">
+          <ui-select ng-model="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 people | filter: $select.search">
               <span ng-bind-html="item.name | highlight: $select.search"></span>
@@ -84,7 +84,7 @@
         <div class="col-sm-6">
           <div class="input-group select2-bootstrap-append">
 
-            <ui-select ng-model="person.selected" theme="select2" class="form-control">
+            <ui-select ng-model="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 repeat="item in people | filter: $select.search">
                 <span ng-bind-html="item.name | highlight: $select.search"></span>
@@ -106,7 +106,7 @@
         <label class="col-sm-3 control-label">Disabled</label>
         <div class="col-sm-6">
 
-          <ui-select ng-model="person.selected" theme="select2" class="form-control" ng-disabled="true">
+          <ui-select ng-model="person.selected" theme="select2" class="form-control" ng-disabled="true" 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 repeat="item in people | filter: $select.search">
               <div ng-bind-html="item.name | highlight: $select.search"></div>

examples/selectize-bootstrap3.html

@@ -68,7 +68,7 @@
         <label class="col-sm-3 control-label">Default</label>
         <div class="col-sm-6">
 
-          <ui-select ng-model="person.selected" theme="selectize">
+          <ui-select ng-model="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 repeat="item in people | filter: $select.search">
               <div ng-bind-html="item.name | highlight: $select.search"></div>
@@ -83,7 +83,7 @@
         <label class="col-sm-3 control-label">Grouped</label>
         <div class="col-sm-6">
 
-          <ui-select ng-model="person.selected" theme="selectize">
+          <ui-select ng-model="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 people | filter: $select.search">
               <span ng-bind-html="item.name | highlight: $select.search"></span>
@@ -121,7 +121,7 @@
         <label class="col-sm-3 control-label">Disabled</label>
         <div class="col-sm-6">
 
-          <ui-select ng-model="person.selected" theme="selectize" class="form-control" ng-disabled="true">
+          <ui-select ng-model="person.selected" theme="selectize" class="form-control" ng-disabled="true" 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 repeat="item in people | filter: $select.search">
               <div ng-bind-html="item.name | highlight: $select.search"></div>