Angularjs compiler does not work with ng-click

Question

I am generating a dynamic div as given below:

0: {id: 19, descricao: "CC 1", centro_custo_pai: 0, ordem_codigo: "", tipo: "Sintético"}
1: {id: 20, descricao: "Filho 1 CC 1", centro_custo_pai: 19, ordem_codigo: "", tipo: "Sintético"}
2: {id: 22, descricao: "Filho 2 CC 1", centro_custo_pai: 19, ordem_codigo: "", tipo: "Analítico"}
3: {id: 27, descricao: "Filho 3 CC 1", centro_custo_pai: 19, ordem_codigo: "", tipo: "Analítico"}
4: {id: 23, descricao: "CC 2", centro_custo_pai: 0, ordem_codigo: "", tipo: "Sintético"}
5: {id: 24, descricao: "CC 3", centro_custo_pai: 0, ordem_codigo: "", tipo: "Sintético"}
6: {id: 25, descricao: "Filho 1 CC 3", centro_custo_pai: 24, ordem_codigo: "", tipo: "Analítico"}
7: {id: 26, descricao: "CC 4", centro_custo_pai: 0, ordem_codigo: "", tipo: "Analítico"}

I use the following JS function to build my div:

$scope.construirTreeViewCentroCustos = function () {
    let estruturaNovaTreeView = '';
    let centroCustoPaiAnterior = '';

    /* Laço do array de centro de custos */
    $scope.data.centroCustos.forEach(element => {
        /* Primeiro nível */
        if (element.centro_custo_pai == 0) {
            if (estruturaNovaTreeView != '') {
                estruturaNovaTreeView += `</div>`;
            }
            estruturaNovaTreeView += `<div class="row codigo-${element.id} pai">${element.ordem_codigo} ${element.descricao}
                <p><i class="icon-ba-plus ba__margin-left-20" title="Novo" ng-if="accessPagina.inserir" ng-click="createCentroCusto()"></i></p>`;

            centroCustoPaiAnterior = element.id;

        /* Demais níveis */
        } else if (element.centro_custo_pai != 0) {
            if (centroCustoPaiAnterior == element.centro_custo_pai) {
                if (estruturaNovaTreeView != '' && centroCustoPaiAnterior != element.centro_custo_pai) {
                    estruturaNovaTreeView += `<p class="codigo-${element.id} filho">${element.ordem_codigo} ${element.descricao}</p>`;
                } else {
                    estruturaNovaTreeView += `<p class="codigo-${element.id} filho">${element.ordem_codigo} ${element.descricao}</p>`;
                }
            }

            /* Captura o centro de custo pai pra construir as próximas lis da ul */
            centroCustoPaiAnterior = element.centro_custo_pai;
        }
    });

    estruturaNovaTreeView += `
        </div>`;

    var html = $compile(estruturaNovaTreeView)($scope);
    angular.element(document.getElementById("treeViewCentroCustos")).append(html);

    $('#containerTreeViewCentroCustos').removeClass('hide');
}

My HTML:

   <!-- TreeView -->
   <div class="row hide" id='containerTreeViewCentroCustos' style="margin-top: 45px; background-color: white;" ng-show="data.mostrarArvoreCentroCustos">
       <div class="row" id="treeViewCentroCustos">
           <!-- Conteúdo TreeView -->
       </div>                   
   </div>
   <!-- Fim TreeView -->

When I remove ng-click from the icon the compiler works, but when I use the Angularjs compiler I cannot generate the icon as expected.

After going through the compiler he gets like this:

<div class="row codigo-19 pai ng-scope"> CC 1
    <p><!-- ngIf: accessPagina.inserir --></p>
    <p class="codigo-20 filho"> Filho 1 CC 1</p>
    <p class="codigo-22 filho"> Filho 2 CC 1</p>
    <p class="codigo-27 filho"> Filho 3 CC 1</p>
</div>

The Angularjs version I’m using is 1.6.1.

I read and tested the links:

• https://stackoverflow.com/questions/40100061/working-with-compile-in-angularjs
• https://docs.angularjs.org/api/ng/service/$Compile
• /questions/63048/ng-click-n%C3%a3o-works-with-elements-created-dynamically? Rq=1

What I do to come up with a solution?