Use clear search button

[Rex90]

I want to include an close icon in the search field to appear when there is text and tapping it to remove the text - any ideas how i can do this?

tried including this in the directive code but not sure how to link the icon to it

                function clearSearch() {
                  $scope.query = '';
                  clearPredictions();
                  $scope.input.focus();
                }

<label class="item item-input">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="text" g-places-autocomplete ng-model="locationDetails"/>
    <a on-touch="clearSearch()"><i class="icon ion-close placeholder-icon"></i></a>
</label>

[abdulhafeez]

I also want to do this. Tried to set input value directly and through ng-model, nothing works.

[luisserota]

Also having this problem!

[abdulhafeez]

Including an id in the input tag and then doing the following works:

document.getElementById('inputId').value = "";

Remember that using setValue does not work. Also, you will need to add the clear button outside of input tag.