Angular: Clear Input Directive

var app = angular.module('plunker', [])

app.controller
  ( 'MainCtrl'
  , function($scope) {
      $scope.inputModel = 'Some Text Duh'
    }
  )

app.directive
  ( 'clearInputField'
    , function($compile){
        var directive =
        { require: 'ngModel'
        , link: function(scope, element, attrs, control){
            var wrapper = angular.element('<div>')
            var button = angular.element('<div>').addClass('close-button')
            
            button.bind('click', function(){
                control.$setViewValue('')
                element.val('')
                scope.$apply()
            })
            
            element.wrap(wrapper)
            element.parent().append(button)
          }
        }
        
      return directive
    }
  )

<!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 src="http://code.angularjs.org/1.1.3/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <input
  	clear-input-field
		type="text"
		style="width:300px"
		class="input-medium search-query"
		placeholder="Insert Text"
	  data-ng-model="inputModel"
		value="{{inputModel}}"/>
    <br />
    {{inputModel}} 
</body>
</html>

/* Put your css in here */

.close-button{
  width:30px;
  height:30px;
  background-color:#444;
}