angular ui-bootstrap typeahead callback on selectMatch?
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 helpshttp://www.techguides.in/how-to-create-autocomplete-using-angularjs-ui/
Edit: this method is not the best one now. It's better to use onSelect callback like explained in the answer above this one.
I found how how do to do what I wanted. I did see that there is a typeahead-editable attribute and if it's set to false then the selected value change only when a value from the model is selected. And so the $watch is working fine to check when a new value is selected.
<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue" typeahead-editable="false">link: function(scope, elm, attrs){ scope.$watch('selected', function(newValue, oldValue) { if (newValue) console.log(oldValue+"->"+newValue); });}
Following should be your HTML
<input id="title" type="text" ng-model="title" typeahead="data.enquiry_title for data in titleData | filter:$viewValue | limitTo:8" typeahead-on-select='onSelect($item, $model, $label)' />
just add typeahead-on-select in input tag with the callback function.
Following would go inside controller
$scope.onSelect = function ($item, $model, $label) { console.log($item); if($item.tid) $scope.activeTitleId = $item.tid };
inside $item you'll get the whole object which you have passed in the main array of suggestion list