SO - 19267979

by Faisal Pathan

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<h1>
Dynamic generated button click event
</h1>
<table data-ng-table="tableParams" class="table table-bordered table-hover " style="border-collapse:collapse" data-ng-init="host.editSave = false">
    <tr id="newTransaction"></tr>
    <tr data-ng-repeat="host in hosts|filter:search:strict">
        <td class="hostTableCols" data-ng-hide="host.editSave">{{host.hostCd}}</td>
        <td class="hostTableCols" data-ng-hide="host.editSave">{{host.hostName}}</td>
    </tr>
</table>

JavaScript

var app = angular.module('my-app', [], function () {

})

app.controller('AppController', function ($scope, $compile) {

    var $el = $('<td contenteditable><input type="text" class="editBox" value=""/></td>' +
        '<td contenteditable><input type="text" class="editBox" value=""/></td>' +
        '<td>' +
        '<span>' +
        '<button id="createHost" class="btn btn-mini btn-success" onclick="angular.element(this).scope().faisal()" ><b>Create</b></button>' +
        '</span>' +
        '</td>').appendTo('#newTransaction');
    $compile($el)($scope);
    
    $scope.faisal = function(){
       alert('good keep it up')
    }
})