title: click function for dynamically created element in angularjs
body: <p>The click functionality in my app is not working for dynamically created elements in <strong>angular js</strong>. </p>
  
  <p>Here's my code:</p>
  
  <p>HTML Code</p>
  
  <pre><code>&lt;div ng-app="myApp" ng-controller="myCtl"&gt;
      &lt;p&gt;
          Click is not working in table
      &lt;/p&gt;
      &lt;table border="1"&gt;
          &lt;tr ng-repeat="value in person.records"&gt;
              &lt;td&gt;{{value.firstname}}&lt;/td&gt;
              &lt;td&gt;{{value.age}}&lt;/td&gt;
              &lt;td ng-bind-html="value.button"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;&lt;br /&gt;
      &lt;br /&gt;
      &lt;p&gt;
          When I click on Click button, My function should be call like below
      &lt;/p&gt;
      &lt;button class="btn btn-primary" type="button" ng-click="trailClick()"&gt;Click&lt;/button&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>JS Code: In the table, when I click on "click button", I'm not getting the functionality I want.</p>
  
  <pre><code>var app = angular.module("myApp", ['ngSanitize']);
  app.controller("myCtl", function($scope, $sce) {
      $scope.trailClick = function() {
          alert('Clicked ');
      }
      $scope.person = {
          "records": [{
              firstname: "John",
              lastname: "Doe",
              age: 50,
              eyecolor: "blue"
          }, {
              firstname: "Dev",
              lastname: "Raj",
              age: 50,
              eyecolor: "black"
          }]
      };
  
      var cln_btn = '&lt;button class="btn btn-primary" type="button" ng-click="trailClick()"&gt;Click&lt;/button&gt;';
      for (var x = 0; x &lt; $scope.person.records.length; x++) {
          $scope.person.records[x].button = $sce.trustAsHtml(cln_btn);
      }
  });
  </code></pre>