How to clear text from AngularUI typeahead input

Question

I have a typeahead input. The input text is set to the option selected on the typeahead. However, I want to clear this text and display the "placeholder" value again on the text box after I select one of the options from typeahead (because I add the selected value to another div in the selectMatch() method.

<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)" typeahead-min-length="3"
    typeahead-wait-ms="500">

I tried to set the text value and the placeholder value of the Input element using its Id but that did not work, such as these:

// the input text was still the 
$('#searchTextBoxId').attr('placeholder', 'HELLO');

selected result

// the input text was still the selected result
$('#searchTextBoxId').val('');

How can I set or reset the text value ?

Answer 1

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