Model is not set to empty

I have the following Input:

 <input type="search" placeholder="Suche" ng-model="query">
 <i ng-if="query.length > 0" ng-click="clearSearch()" class="icon ion-close"></i>

The Controller:

.controller('ListCtrl', function($scope) {
	$scope.clearSearch = function () {
		console.log("pressed");
		$scope.query = '';
	};
})

Now I press the icon and also see the “pressed” in the console. But the value in my input is not deleted with ‘’, its still there.

Whats wrong?

Try to use a model like this.

$scope.query.term = '';

<input type="search" placeholder="Suche" ng-model="query.term" />
<i ng-if="query.term" ng-click="query.term = ''" class="icon ion-close"></i>
1 Like

Follow @gnomeontherun solution or try to place inside a button:

<button ng-if="query" ng-click="clearSearch()">
  <i class="icon ion-close"></i>
</button>
1 Like

This resolved the problem, thank you!