angular x:clearable directive to place a clear button at the end of an input

xng.clearable.js

angular.directive('x:clearable', function(expression, element) {
    var compiler = this;
    compiler.directives(true);
    compiler.descend(true);
    element.css({'padding-right': '2em'});
    element.after('<button style="margin-left: -2em; border: none; background-color: transparent;">&#x2612;</button>');
    return function(element) {
      var scope = this;
      var button = element.next('button');
      button.bind('click', function() {
          scope.$set(element.attr('name'), '');
          scope.$root.$eval();
        });
    };
  });