title: How to add ng-click handler dynamically
body: <p>I tried to add ng-click on a button generated before (dynamic), but didn't work well. Also I tried already all solutions found on this forum and no one work well.</p>
  
  <p>My html code:</p>
  
  <pre><code>&lt;body class="max_height" ng-app="myApp"&gt;
      &lt;div class="container max_height" ng-controller="myCtrl"&gt;
          &lt;div id="play" tabindex="0" ng-init="init()" ng-keydown="keyDown($event)"&gt;
              {{ content }}
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="js/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>My AngularJS code:</p>
  
  <pre><code>var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope, $compile) {
    $scope.init = function() {
      var el = '&lt;button class="btn" id="start" data-ng-click="startAnimation()"&gt;Start&lt;/buttom&gt;';
      var element = angular.element(document.querySelector('#play'));
      var generated = element.html(el);
      $compile(generated)($scope);
  }
  $scope.startAnimation = function(){
          console.log("click");
  }
  });
  </code></pre>
  
  <p>My error is "RangeError: Maximum call stack size exceeded" and this is generated by $compile(generated)($scope); . Another problem, derived from the first, is that if I make one click on button then the function startAnimation will me executed hundreds of times.</p>
  
  <p>Please give me a solution. Where is the mistake.</p>