How to clear text from AngularUI typeahead input

I was looking for an answer to this as well, for the longest time. I finally found a resolution that worked for me.

I ended up setting the NgModel to an empty string within the typeahead-on-select attribute:


In your typeahead-on-select attribute add asyncSelected = ''; behind your select function, like so:

<input ...
    typeahead-on-select="selectMatch(asyncSelected); asyncSelected = '';" />

Making your final typeahead looking something like:

<input id="searchTextBoxId" type="text" 
    ng-model="asyncSelected" placeholder="Search  addresses..."
    typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
    typeahead-loading="loadingLocations" class="form-control"
    typeahead-on-select="selectMatch(asyncSelected); asyncSelected = '';" 
    typeahead-min-length="3"
    typeahead-wait-ms="500">

Fiddle adding each selection to an array


Actually this problem is not from typeahead. It is common issue about ng-model, scope and dot notation.

Refer Scope inheritance in Angular

At your situation, you just change the model name like as xx.selected with dot-notation and set xx.selected empty in typeahead-on-select callback.