title: Append html to an element in directive and make a local function to interact with it
body: <p>In my AngularJS application, I have different complex inputs everywhere. For example, some inputs have a directive to use autocompletion with Google Places or with autocompletion from Twitter Bootstrap.</p>
  
  <p>I'm searching for a way to make a directive which displays an erase button when we add some text like iOS feature.</p>
  
  <p>I made this one, but the <code>scope.erase</code> doesn't start, nor does the <code>ng-show</code>.</p>
  
  <p>Is it possible to add HTML after the text input and "play" with them inside the controller?</p>
  
  <p>My test:</p>
  
  <pre><code>app.directive('eraseBtn', function($parse, $compile){
  
  return {
      require: 'ngModel',
      restrict: "A",
      transclude: true,
      link : function(scope, element, attrs, model){
  
          element.parent().append('&lt;button ng-click="erase()" ng-show="model.length &gt; 0" class="erase-btn"&gt;x&lt;/button&gt;');
  
          scope.erase = function(){
              console.log('Erase test');
          }
      }
  }
  });
  </code></pre>
  
  <p>I don't want to use a template because all of my inputs' HTML are really different.</p>