Typeahead AngularJS | Autocomplete when click

I'm using the getbootstrap typeahead to populate an input value. I've setup everything so that the user has to pick something from this list:

<input type="text" class="form-control" id="birdname" ng-model="birdname" required ng-disabled="checked" autocomplete="off" placeholder="Check the box if you don't know!" 
                uib-typeahead="bird for bird in birds | filter:$viewValue | limitTo:8" typeahead-no-results="noResults"
                uib-tooltip="Pick a bird or check the box if unsure!"
                tooltip-placement="top-right"
                tooltip-trigger="mouseenter"
                tooltip-enable="!birdname">
        </div>
        <div ng-show="noResults">
          <i class="glyphicon glyphicon-remove"></i> No Results Found - Please Try Again!
        </div>

As you can see, the user has to pick something from this list or the validation won't allow it, though I am having one issue: If the user starts typing and is typing a birdname that exists (list showing with birds on input), but then clicks out of the input with his mouse. typeahead accepts this as 'correct' even though the full name hasn't been picked.

Is there a fix to this?

If you didn't understand what I mean, the following picture should hopefully explain it:

Is there a solution to this? For example, it picking the first option in the list when clicked?