title: AngularJS: Dynamically binding Click in directive gets fired multiple times
body: <p>I'm trying to add fields dynamically and I'm binding <code>click</code> event in the directive's <code>link</code> function. But it seems to be firing several times as I add more fields. See the example below -</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var clicks = 0;
  var app = angular.module('test', []);
  
  app.directive('control', function($compile) {
    var linker = function(scope, element, attrs) {
      element.html('&lt;button style="background:grey;"&gt;Button ' + scope.count + '&lt;/button&gt;');
  
      element.bind('click', function() {
        clicks++;
        $('#clicks').html('Clicked ' + clicks + ' times')
      });
  
      $compile(element.contents())(scope);
    };
  
    return {
      restrict: 'E',
      scope: {
        count: '@'
      },
      link: linker
    }
  });
  
  app.controller('TestController', function($scope, $compile) {
    $scope.count = 1;
    $scope.addControl = function() {
      $('#content').append('&lt;control count="' + $scope.count+++'"&gt;&lt;/control&gt;');
      $compile($('#content').contents())($scope);
    };
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#content {
    margin-top: 10px;
  }
  #clicks {
    margin-top: 10px;
  }
  p {
    color: grey;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;div ng-app="test" ng-controller="TestController"&gt;
    &lt;button ng-click="addControl()"&gt;Add Button&lt;/button&gt;
    &lt;div id="content"&gt;&lt;/div&gt;
    &lt;div id="clicks"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;p&gt;Add multiple buttons and click the button that was added in the beginning. Notice the Clicks to be increased multiple times.&lt;/p&gt;
  &lt;p&gt;For instance, add a bunch of buttons and click Button 1&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'd like to have the <code>click</code> event fired only once for a specific element.</p>