angular ui-bootstrap typeahead callback on selectMatch?

Problem

I’m using the angular ui-bootstrap typeahead and I would want to use it as a way to pick up many choices, so I’d need to get the selected value when selectMatch method is launched but I can’t find how to do that in my controller

<div class='container-fluid' ng-controller="TypeaheadCtrl">
<pre>Model: {{selected| json}}</pre>
<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue">

If I watch the selected value, I got the change every time a key is pressed…

scope.$watch('selected', function(newValue, oldValue) {... });

I got that the method selectMatch is the one which is called when the user press enter or click on the list but I don’t know how to have a callback on that…

Thanks !

Problem courtesy of: mchasles

Solution

There is better way of doing this now. A new callback method has been added

In controller file add the following:

$scope.onSelect = function ($item, $model, $label) {
$scope.$item = $item;
$scope.$model = $model;
$scope.$label = $label;
};

In view add the following:

<input type="text"
ng-model="selected"
typeahead="state for state in states | filter:$viewValue"
typeahead-editable="false"
typeahead-on-select="onSelect($item, $model, $label)"/>

See the typeahead spec for more information (search for onSelect).

Check out if the following URLs helps http://www.techguides.in/how-to-create-autocomplete-using-angularjs-ui/

Solution courtesy of: Matt

View additional discussion.