Angular UI Bootstrap - Clear model value when a Typeahead dropdown value is not selected?

Question

I'm trying to figure out how to have a UI.Bootstrap Typeahead (http://angular-ui.github.io/bootstrap/) only set the model value if a selection is made from the dropdown, and clear the field if no selection was made.

If there's a different control out there that does this that would work too.

The Typeahead is selecting an object and if the user just types a few characters and then leaves the field, the model value is set to the string value of the field. I can obviously test for this case but modifying the scope model value doesn't refresh the form validity. So if I have a required field I also have to set the field's validity to false.

This all seems like a lot of work that someone must have already figured out. Any suggestions?

Edit

Another thought I had was, is it best practice to separate the Typeahead from the scope values that are being submitted back to the server?

Answer 1

Accepted part is good solution. It could be also good to add

 typeahead-select-on-blur="true" 

in input box. It will make fill up ng-model value (if it not typed entire term) to item in typeahead dropdown which you clicked on select. You then make validation of ng-model in validateSelection() and it's important to validate entire term. About "Another thought" in Edit part. Maybe it's not very user friendly when your typed in disappear when you click away. Better is they stay in and user can edit them. When you do validateSelection() you could mark the input value as invalid for the form validation.

Answer 2

I had a similar problem. The way I went around it is by using the blur event to validate.

<input type="text" ng-model="yourModel" ng-blur="validateSelection()
  typeahead="item for item in list | filter:$viewValue"">