Angularjs ng-click event does not work when configured in an element coming from an asynchronous request

Question

I have a page named listDT.php that contains a Datatable (https://www.datatables.net/). I used the Datatable plugin interface to dynamically load the Datatable content. The last column of the table contains only checkboxes. I want these checkboxes to trigger the $Scope.update event that I implemented in the Opcoesctrl controller, but I can’t, nothing is displayed in the browser toolbox console, maybe because the checkboxes are being loaded dynamically, because when I use an element of the page itself listed DT.php as Event Rigger $Scope.updatePedido() my implementation works as expected.

Note: Checkboxes are within the context of the Opcoesctrl controller.

Question: how to use checkboxes to trigger the event in question?

Answer 1

Angularjs compiles its Angular template (which without Angular would be static HTML) when the page is loaded into the browser. It is at this moment that he recognizes the directives and makes the internal connections to listen to events in elements that contain directives.

If you add elements to the page later, it will be "dead text" - Angular will not "see" any directive there.

Run "$Compile" on the HTML snippets that you load/dynamically build, before adding them to the page - this will cause the angel to "see" the directives there. Only I haven’t tested here what the scope would look like for this, since you have to run $Compile on the elements before adding them to your final position - it’s possible that it won’t work.

If everything else fails, use the good old javascript "onclick" in the elements you create dynamically.