Get selected value with Angular bootstrap's TYPEAHEAD plugin and ng-change

Question

Why I couldn't get the selected typeahead value correctly using ng-change function ?

this is my code

<input 
   type="text" 
   ng-model="asyncSelected" 
   placeholder="Locations loaded via $http"
   typeahead="address for address in getLocation($viewValue)" 
   typeahead-loading="loadingLocations" 
   class="form-control" 
   ng-change="change(asyncSelected)">

the problem is variable asyncSelected always return string that I typed, not selected via typeahead. This is the plunkr to show you the problem, just type in it. I fork it from official documentation of angular-ui-bootstrap

PLUNKR LINK HERE

Answer 1

You can use the typeahead-on-select attribute to call a function when a value is selected. Try with this:

<input type="text" 
  ng-model="asyncSelected" 
  placeholder="Locations loaded via $http" 
  typeahead="address for address in getLocation($viewValue)" 
  typeahead-loading="loadingLocations" 
  class="form-control" 
  typeahead-on-select="change(asyncSelected)">