title: bootstrap ui - typeahead onselect, custom value is not displayed
body: <p>I am trying to add autocomplete functionality using bootstrap.  when a value is selected from autocomplete list, I would like to append a ":" at the end of the selected value.  For some reason this appending is not working.<br>
  My angular html code is</p>
  
  <pre><code>&lt;input type="text" ng-model="query" id="search_es"
                         typeahead="v for v in getNext($viewValue) | filter: type_filter"
                         typeahead-on-select='onSelect($item, $model, $label)'
                         autocomplete = "off"
                         placeholder="Type to search..."  /&gt;
                  &lt;div my-search-directive="search_radar"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here is the onSelect js code</p>
  
  <pre><code>$scope.onSelect = function($item,$model,$label) {
        $scope.query += ": ";
  }
  </code></pre>
  
  <p>I could capture the value of query in another variable and can display on UI, but on the bootstrap typhead text box.  </p>
  
  <p>I am using angular1.4.7 
  ui-bootstrap-tpls-0.14.3.min.js</p>
  
  <p>Can anyone please help.</p>