var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.params = {};
$scope.clearText = function() {
$scope.params.text = null;
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div style="margin: 20px; max-width: 500px;">
<div class="form-group has-feedback">
<label>text box</label>
<input type="text"
ng-model="params.text"
class="form-control"
placeholder="type something here...">
<span ng-if="params.text"
ng-click="clearText()"
class="glyphicon glyphicon-remove form-control-feedback"
style="cursor: pointer; pointer-events: all;"
uib-tooltip="clear">
</span>
</div>
</div>
</body>
</html>
/* Put your css in here */