title: Angularjs directive and now onclick is slow
body: <p>I recently re-factored a bit of html into a directive.  The original HTML had an ng-click attribute that called a function in the control and cleared out a data field.  Its fast.  But when I re-factored it into a directive, there is a lag between the button press and the clearing of the field.</p>
  
  <pre><code>.directive('evFilterbox', ['$parse', function ($parse) {
          return {
              restrict: "EA",
              template: function (el, at) {
                  return "&lt;div class=\"filterbox\"&gt;"
                          + "&lt;div class=\"input-group\"&gt;"
                          + "&lt;input id=\"input-"+ at.id +"\" class=\"form-control\" type=\"text\""
                          + " tooltip=\"{{tt." + at.id + "}}\""
                          + " placeholder=\"{{pp." + at.id + "}}\""
                          + " ng-model=\"data." + at.id + "\"&gt;"
                          + "&lt;span id=\"span-"+at.id +"\" class=\"input-group-addon glyphicon glyphicon-remove\"&gt;&lt;/span&gt;"
                          + "&lt;/div&gt;&lt;/div&gt;";
              },
              replace: true,
              link: function (scope, element, attrs) {
  
                  $('#span-' + attrs.id).bind('click', function() {
                      scope.data[attrs.id] = '';
                  });
              }
          };
      }])
  </code></pre>
  
  <p>Any comments on improving this directive are welcome.</p>