javascript - AngularJS search input box with dynamic and functionable icons -

i'm learning angularjs , have search box, within box want 3 icons (magnifineglass, cross , spinner). first instance magnifineglass appear when input box empty, second instance spinner appear when user has entered characters input box , when search has gone through array output possible searches (just using timer now) "x" appear in third instance once possible searches returned, when clicked clear field , start over.

this have far:

<div ng-app="searchdemo" ng-controller="locationformctrl"> <div>     <input type="text" class="clearable magnifineglass" ng-click="search()"/>     <!--<i class="glyphicon glyphicon-refresh spinning"></i>-->         {{ outputtext }}     </div> 

fiddle - couldn't formatting work correctly on form put rest in fiddle.

i tried make brief "clear field" example here.

what struggling can represent icons text (outputtext) unsure how replace icons , have them inside input box , work angular.

any appreciated have been working on past couple of hours , feel though each of 3 separately bringing 3 tricky , seem getting more , more confused.

thanks, john

in html use :

<input type="text" class="clearable" ng-model="searchtext"/> <i class="glyphicon" ng-class="searchicon" ng-hide="clearenable" ng-click="search()"></i> <i class="glyphicon" ng-class="searchicon" ng-show="clearenable" ng-click="clear()"></i> 

in controller :

// initialise searchicon magnifying glass $scope.searchicon = "glyphicon-search"; 

in search() function :

$scope.searchicon = "glyphicon-refresh spinning"; 

in clear() function :

$scope.searchicon = "glyphicon-search"; 

updated fiddle : demo have used ng-click on icons, can use ng-keyup, ng-blur on input tag also