<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <style>
      .container {
        width: 480px !important;
      }
    </style>
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container" ng-controller="MainController">
      <p>&nbsp;</p>
      <div class="form-group has-feedback has-clear">
        <label class="control-label">First Name</label>
        <input type="text" class="form-control" ng-model="data.firstName" />
        <input-clear model="data.firstName" />
      </div>
      
      <div class="form-group has-feedback has-clear">
        <label class="control-label">Last Name</label>
        <input type="text" class="form-control" ng-model="data.lastName" />
        <input-clear model="data.lastName" />
      </div>
      
      <div class="form-group has-feedback has-clear">
        <label class="control-label">Age</label>
        <input type="number" class="form-control" ng-model="data.age" />
        <input-clear model="data.age" />
      </div>
      
      <div class="form-group has-feedback has-clear">
        <label class="control-label">Email</label>
        <input type="email" class="form-control" ng-model="data.email">
        <input-clear model="data.email" />
      </div>
      
      <pre>{{data | json}}</pre>
    </div>
  </body>

</html>
var app = angular.module('app', []);

app.controller('MainController', ['$scope', function ($scope) {
  $scope.data = {
    firstName: null,
    lastName: null,
    age: null,
    email: null
  }
}]);

app.directive('inputClear', function () {
  return {
    template: '<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true" ng-click="model = null" ng-show="show()"></span>',
    replace: true,
    scope: {
      model: '='
    },
    controller: ['$scope', function ($scope) {
      $scope.show = function () {
        return (typeof $scope.model !== 'undefined') && $scope.model !== null && $scope.model !== '';
      }
    }]
  }
})
.has-clear .form-control-feedback {
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0.5;
}