ng-clip in datatables using server-side processing

Question

I have AngularJS frontend app with PHP backend. Also I use ng-clip ( zeroclipboard ) and datatables with server-side processing. All rows are returned from server side and one output of row looks like this:

"aaData": [
    {
        "id": 287,
        "email": "[email protected]",
        "displayName": "Name Surname",
        "role": "Some Role",
        "school": "Some school",
        "section": "Some section,
        "token": "<button class=\"btn btn-sm btn-default\" type=\"button\" clip-copy=\"'https://somesite.com/register?token=DPXpGssPzQYrkiH6Oktw9mvtw5BzWLAb '\"><i class=\"fa fa-copy\"></i></button>",
        "datetime": "06.10.2014 20:51",
        "actions": "<button class=\"btn btn-sm btn-default\" type=\"button\"><i class=\"fa fa-pencil\"></i></button>\n                                <button class=\"btn btn-sm btn-danger btn-default\" type=\"button\"><i class=\"fa fa-trash-o\"></i></button>"
    },

And because that datatatables gets output ng-clip plugin isn't working. I don't know why it's not working but looks like datatable rows are loaded after ng-clip, that is loaded on pageload, so

Question is how can I re-init ng-clip so each row's button would work, or how can I could make workaround for this ?

"token": "<button class=\"btn btn-sm btn-default\" type=\"button\" clip-copy=\"'https://somesite.com/register?token=DPXpGssPzQYrkiH6Oktw9mvtw5BzWLAb '\"><i class=\"fa fa-copy\"></i></button>"

Button should copy contents of clip-copy="" which differs in each row.

Plunkr

This demonstrates that first button does copy, and copy buttons in datatable rows aren't working

Answer 1

Indeed, because you load the data after angular, it will not compile the clip-copy directive. To force this behavior, you can recompile your table element on each redraw of your table.

Basically, use the fnDrawCallback option provide by Datatables, and $compile.

.withOption('fnDrawCallback', function(table) {
  $compile(angular.element(table.nTable).contents())($scope);
})

Here is your updated Plunkr

As a side note, you don't have to explicitly write anything in your HTML like you did with the <thead>, it's automatically generated. You should also take a look at ngAnnotate to prevent you to use the redundant array-based syntax.