ng-file-upload file browser not showing with datatables generated element

Question

I'm generating a dynamic content with datatables and one of the table cells has a button. This button should trigger the file upload function of the page's controller. But nothing happens when I click it (even TEST is not logged the function doesn't fire).

Here is the file upload handler function:

$scope.uploadFile = function (file) {
    //DBG
    console.log('TEST'); //No TEST is logged to console at this point
    Upload.upload({
        url: '/file-upload',
        data: {file: file}
    }).then(function (resp) {
        console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
    }, function (resp) {
        console.log('Error status: ' + resp.status);
    }, function (evt) {
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
        console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
    });
};

And html is dynamically generated with datatables like this:

<button class="btn button btn-default button-table" ngf-select="uploadFile($file)"><i class="fa fa-plus-circle"></i></button>

I guess this is an issue with the click event not triggering file browser dynamically and I don't know how to force trigger the file selection event with this plugin.

Answer 1

I solved the issue by creating a static hidden button:

<button id="button-upload-real" style="display: none" ngf-select="uploadFile($file)"></button>

and triggering a click event from the buttons on dynamically generated datatables cells. Works like swiss clock now.