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

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"">