angular bootstrap typeahead not working with a dyn

Question

I am working with typeahead directive in angular-bootstrap. My problem is when user change the input, I want to trigger a ng-change event to get the list from the server, then filter the results. After that I want to see the list to be populated with uib-typeahead. For that, I am using an array $scope.list to store the result from the server and then I pass it into uib-typeahead as

 <div class="input-group">
    <input type="text" class="form-control" ng-model="asyncSelected" placeholder="Search city or zip code" 
    ng-change="getLocationForSearch(asyncSelected)" 
    uib-typeahead="item for item in list" />
 </div>

In the getLocationForSearch method, I update the list. I print the list in the console and it return correct value, however the list is not populated correctly in the dropdown. My plunkr is http://plnkr.co/edit/diot4RvsIdWht1zM3NeE?p=preview

Thanks

Answer 1

Add this directive to your input:

<input ... typeahead-on-select="onSelect($item, $model, $label)" />

Then remove ng-change

And finally, add onSelect function to your scope:

$scope.onSelect = function($item, $model, $label) {
    // do whatever you like
}

Answer 2

You can do it as part of the typeahead directive without ng-change:

<input type="text" class="form-control" ng-model="asyncSelected" placeholder="Search city or zip code"
    uib-typeahead="item for item in getLocationForSearch($viewValue)" />

And then just return the list from the getLocationForSearch function. Here is a working plunker:

http://plnkr.co/edit/795euBYoCKxwzORoT2Hp?p=preview