click function for dynamically created element in angularjs
<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>