Buttons added to the table generated with Angularjs Datatables do not allow function execution in the current scope

Question

I have a table built with Angularjs Datatables as follows:

HTML

<table datatable="" dt-options="concessoes.standardOptions" dt-columns="concessoes.standardColumns" dt-instance="concessoes.dtInstance" class="table table-condensed table-striped table-bordered table-hover" width="100%">
    <thead>
        <tr>
            <th data-hide="phone">ID</th>
            <th data-class="expand"> Processo</th>
            <th data-class="expand"> Objeto</th>
            <th data-hide="phone"><i class="fa fa-fw fa-map-marker txt-color-blue hidden-md hidden-sm hidden-xs"></i> UF</th>
            <th>Região</th>
            <th data-hide="phone,tablet"> Macrossegmento</th>
            <th data-hide="expand"> </th>
        </tr>
    </thead>
</table>

Javascript/ Controller

vm.standardOptions = DTOptionsBuilder
        // TODO: Passar a Url para um serviço e trazer os dados do serviço
        .fromSource('/api/BasesDados/Concessoes/concessoes.php')
        .withOption('scrollX', '100%')
        .withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
                "t" +
                "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>")
        .withBootstrap()
        .withButtons([
            {extend: 'colvis', text: 'Vizualização'},
            {extend: 'copy', text: 'Copiar'},
            {extend: 'print', text: 'Imprimir'},
            {extend: 'excel', text: 'MS Excel'},
            {
                text: 'Incluir projeto',
                key: '1',
                action: function (e, dt, node, config) {
                    $scope.adicionarProjeto();
                }
            }
        ]);

// Conlunas que serão mostradas
vm.standardColumns = [
    DTColumnBuilder.newColumn('id').notVisible(),
    DTColumnBuilder.newColumn('processo'),
    DTColumnBuilder.newColumn('objeto'),
    DTColumnBuilder.newColumn('uf'),
    DTColumnBuilder.newColumn('regiao'),
    DTColumnBuilder.newColumn('macro'),
    DTColumnBuilder.newColumn(null).withTitle('Ações').notSortable().renderWith(botoesDeAcao)
];
// 2. Renderiza as opções de ações disponíveis para o usuário no DOM, como incluir, editar e excluir
// Botões de ação da última coluna: editar e excluir registro
function botoesDeAcao(data, type, full, meta) {
    vm.projeto[data.id] = data;
    return '<button class="btn btn-info btn-xs" ng-click="concessoes.editarProjeto(' + data.id + ')">' +
           '   <i class="fa fa-edit"></i>' +
           '</button>&nbsp;' +
           '<button class="btn btn-danger btn-xs" ng-click="concessoes.excluirProjeto(' + data.id + ')">' +
           '   <i class="fa fa-trash-o"></i>' +
           '</button>';
}

In action buttons, in the function botoesDeAcao(), I am adding ng-click to the two buttons with the alias/nickname I gave to the controller, in this case, concessions.

However, the function in the controller does not seem to respond to clicking the button.

$scope.editarProjeto = function(projetoId){
    console.log(projetoId);
} 

No error is displayed.

Note that the ID is passed to the function on the button: <button ng-click="concessao.editarProjeto(5026)">Editar</button>

Answer 1

I made the same question on Stackoverflow and I got the right answer.

I only had to do the following, according to the answer:

function createdRow(row, data, dataIndex) {
    $compile(angular.element(row).contents())($scope);
}

Although I found the solution myself, the hunches of the people at Stackoverflow helped a lot.