javascript - Fire ng-click on dynamic element -

i want create dynamic elements can fire ng-click event , want datatables rows obtained through ajax , dynamically created. problem ng-click isn't fired on row elements. have recreated problem in jsbin situation (the datatables part doesn't matter).

html

<div id="elements" ng-controller="testcontroller controller">   <button ng-click='dosomething()'>this button work</button>   </div>    <button class="click">create element</button> 

when create element button clicked, button added dom in #elements div. button within div clicked, console output something. has when click created button in #elements div doesn't dynamically created button.

js

app.controller('testcontroller', ['$http', '$scope', function ($http, $scope) {   //the ng function.   $scope.dosomething = function(){     console.log('function fired!');   }; }]);                                  //create new element in #elements div.                                   (function(){   $(".click").on("click", function(){     var element = "<button ng-click='dosomething()'>this not work</button>";     $("#elements").append(element);   }); })(); 

http://jsbin.com/hakibocabe/edit?html,js,console,output

what doing wrong? missing something?

as understand it, want add buttons div when button clicked , have each button in div use dosomething function.

so pure angular answer want this:

html:

<div ng-controller="testcontroller">   <div ng-repeat="button in buttons">     <button ng-click="dosomething()">button</button>   </div>   <button ng-click="addbutton()">add</button> </div> 

js:

app.controller('testcontroller', ['$http', '$scope', function ($http, $scope) {   $scope.buttons = [];    $scope.dosomething = function(){     console.log('function fired!');   };    $scope.addbutton = function(){     $scope.buttons.push($scope.buttons.length)//or whatever content   }; }]);