How to make AngularStrap typeahead selection uneditable

Question

I'm using AngularStrap's typeahead element:

<input type="text" ng-model="selectedFruit" bs-options="fruit for fruit in fruits" placeholder="Begin typing fruit" bs-typeahead>

When a fruit is selected in the typeahead it is displayed in the typeahead as a string that can be edited by the user. I want the user to only be able to submit the fruit by its exact name. If a user chooses apple and then by accident edits the string to be aple my app will crash when they submit.

Is there a way to make the string uneditable in the typeahead once it is selected? The user should be able to change their selection by choosing another fruit from the typeahead array, so the first selection shouldn't be unchangeable.

Answer 1

So, going off of Luke's suggestion above, the following solution is what worked for me:

HTML:

<div ng-repeat="pie in pies">
    <input type="text" bs-on-select="addSpelling" ng-blur="spellCheck()" bs-options="stock for stock in allBaskets" ng-model="pie.fruit" bs-typeahead>
</div>

Note it needs to be bs-on-select="addSpelling" and not bs-on-select="addSpelling()" since the second option will cause the function to be fired when the page loads.

In controller:

$scope.addSpelling = function(){
    this.scope.spelling = this.scope.$modelValue;
}

$scope.spellCheck = function(){
    if(this.pie.fruit == ""{
        return;
    }
    if(this.pie.fruit != this.spelling){
        this.pie.fruit = this.spelling;
    }    
}