Javascript function not being executed

Question

I have an angular app that renders some HTML dinamycally, in that html I havea checkbox which should select all the child checkboxes, the function name is: chkallonclick, however is never executed.

I inspected the html and the ng-click attribute is rendered, I also placed a debugger line but its never hit.

controller.js

function renderdata() {
    debugger;
    var detailrules = new Array();
    var strhtml = "";
    strhtml += "<table id='tblContentHeader' style='width:100px;float:left;margin-left:21px;padding-top:15px'>";
    strhtml += drawheader();
    strhtml += "<tbody>";

    if (vm.listRules.length > 0) {
        for (var i = 0; i < vm.listRules.length; i++) {
            strhtml += "<tr>";
            strhtml += "<td style='width:20px;text-align:center;background-color:white;'>";
            strhtml += "<input type='checkbox' ruleid='" + vm.listRules[i].RuleId + "' id='chk_" + vm.listRules[i].RuleId + "'>";
            strhtml += "</td>";
            strhtml += "<td style='width:20px;text-align:center;background-color:white;'>";
            strhtml += "<div data-icon='Expand' LineId='" + vm.listRules[i].RuleId + "' Expanded='false' ng-click='expand_details()' style='cursor:pointer;height:14px;width:17px;' id='Expand" + vm.listRules[i].RuleId + "'></div>";

            strhtml += "</td>";
            strhtml += "<td style='width:200px;text-align:center;background-color:white;'>";
            strhtml += "<label style='font-family:Verdana;font-size:10px;'>" + vm.listRules[i].RuleName + "</label>";
            strhtml += "</td>";
            if (vm.listFarmsRules.length > 0) {
                detailrules = Enumerable.From(vm.listFarmsRules).Where(function(x) {
                    return x.RuleId == vm.listRules[i].RuleId
                }).ToArray();
            }
            strhtml += "</tr>";
            strhtml += "<tr style='display:none;' id='CurrentRow" + vm.listRules[i].RuleId + "'>";
            strhtml += "<td colspan='18' style='padding: 0px;margin: 0px;border: 0px;'>";
            strhtml += "<div id='DivDetails" + vm.listRules[i].RuleId + "' style='margin:10px 10px;border:1px solid #a5a5a5;visibility:hidden;height:200px;background-color:white;'>" + renderdetails(detailrules) + "</div>";
            strhtml += "</td>";
            strhtml += "</tr>";

        }
    }
    strhtml += "</tbody>";
    strhtml += "</table>";

    $('#tablerules').html(strhtml);
    $compile(document.getElementById("tablerules"))(vm);


}

function drawheader() {
    var strhtmlheader = "";
    strhtmlheader += "<thead>"
    strhtmlheader += "<tr>"
    strhtmlheader += "<th>"
    strhtmlheader += "<input type='checkbox' id='chkall' ng-click='chkallonclick()'>"
    strhtmlheader += "</th>"
    strhtmlheader += "<th>"
    strhtmlheader += "<label id='lblrule' style='margin:5px;font-family:Verdana;font-size:10px;'>Reglas</label>"
    strhtmlheader += "</th>"
    strhtmlheader += "<th>"
    strhtmlheader += "<img src=''/>"
    strhtmlheader += "</th>"
    strhtmlheader += "</tr>"
    strhtmlheader += "</thead>"

    return strhtmlheader;
}

function renderdetails(details) {
    var strhtmldetails = "";
    strhtmldetails += "<table style='width:100%'>";
    strhtmldetails += "<thead style='display:block;'>";
    strhtmldetails += "<tr>";
    strhtmldetails += "<th>";
    strhtmldetails += "</th>";
    strhtmldetails += "<th style='text-align:center;width:120px;height:10px;background-color:#dadada;'>";
    strhtmldetails += "<label>Finca</label>";
    strhtmldetails += "</th>";
    strhtmldetails += "</tr>";
    strhtmldetails += "</thead>";
    strhtmldetails += "<tbody>";
    if (details.length > 0) {
        for (var i = 0; i < details.length; i++) {
            strhtmldetails += "<tr>";
            strhtmldetails += "<td>";
            strhtmldetails += "<img src='' detailid='" + details[i].FarmRuleId + "' id='img_" + details[i].FarmRuleId + "'/>";
            strhtmldetails += "</td>";
            strhtmldetails += "<td style='text-align:center;'>";
            strhtmldetails += "<label>" + details[i].Farm + "</label>";
            strhtmldetails += "</td>";
            strhtmldetails += "</tr>";
        }
    } else {
        strhtmldetails += "<tr>";
        strhtmldetails += "<td style='text-align:center;'>";
        strhtmldetails += "<select>";
        for (var j = 0; j < vm.listAvailableFarms.length; j++) {
            strhtmldetails += "<option value='" + vm.listAvailableFarms[j].BusinessUnitId + "'>" + vm.listAvailableFarms[j].Code + "";
        }
        strhtmldetails += "</option>";
        strhtmldetails += "</select>";
        strhtmldetails += "</td>";
        strhtmldetails += "</tr>";
    }

    strhtmldetails += "</tbody>";
    strhtmldetails += "</table>";

    return strhtmldetails;

}

function expand_details(e) {
    e = event.srcElement;
    var Validate = e.getAttribute("Expanded");
    var CurrentExpand = e.id;
    var LineId = e.getAttribute("LineId");

    if (Validate == 'false') {
        $("#" + CurrentExpand).attr('data-icon', 'Collapse')
        $("#" + CurrentExpand).attr('Expanded', 'true');
        $("#CurrentRow" + LineId).toggle();
        $("#DivDetails" + LineId).toggle();
        $("#DivDetails" + LineId).css("visibility", "visible");

    } else {
        $("#" + CurrentExpand).attr('data-icon', 'Expand')
        $("#" + CurrentExpand).attr('Expanded', 'false')
        $("#CurrentRow" + LineId).hide();
        $("#DivDetails" + LineId).hide();
        $("#DivDetails" + LineId).css("visibility", "hidden");
    }
}

function chkallonclick(e) {
    debugger;
    e = event.srcElement;
    var $AllCheck = $("#tblContentHeader").find("input:checkbox").not("#chkall");

    if (e.checked == true) {

        $AllCheck.each(function() {
            if (!$(this).is(":disabled"))
                this.checked = true;
        });

    } else {

        $AllCheck.each(function() {
            this.checked = false;
        });
    }
}

view

<!--<script src="../Scripts/linq.min.js" type="text/javascript"></script>-->
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="estimate row">
            <div class="col-md-12 estimate__header">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
                        <h4 class="estimate__header__title">Bienvenido, <span class="estimate__username">{{user.code}}</span></h4>


                        <button class="gs__btn gs__btn--icon pull-right" ng-click="logOut()">
                            <img src="../../Images/icon_salir.png" />
                        </button>
                    </div>
                </div>
            </div>

            <div style="width:150px;display:inline-block;float:left;margin-left:10px">
                <h4 style="margin-left:10px" class="allocation__header__title">Regla</h4>
                <select style="margin-left:10px" ng-model="selectedRule" ng-options="item.RuleName as item.RuleName for item in listRules">
                    <option value="">Seleccione Regla</option>
                </select>
            </div>

            <div style="width:150px;display:inline-block">
                <h4 style="margin-left:10px" class="allocation__header__title">Año</h4>
                <select style="margin-left:10px" ng-model="selectedYear" ng-options="item.Year as item.Year for item in listYears | orderBy:'Year'">
                    <option value="">Seleccione Año</option>
                </select>
            </div>

            <div class="row" style="padding-top:15px">
                <div class="col-md-12">
                    <div class="pull-right">
                        <button ng-click="load()" class="gs__btn gs__btn--primary">
                            <img src="../../Images/icon_cargar.png" alt="" />
                            <span class="gs__btn--text">Cargar</span>
                        </button>
                        <button style="margin-right:21px" id="save" ng-click="save()" class="gs__btn gs__btn--disabled">
                            <img src="../../Images/icon_enviar.png" alt="" />
                            <span class="gs__btn--text">Enviar</span>
                        </button>
                    </div>
                </div>
                <br>
            </div>

            <div id="tablerules" style="width:150px;padding-top:25px">

            </div>

            <div class="col-xs-12 col-sm-12 progressbar--fixedBottom" ng-show="isShowProgress">
                <div>
                    <uib-progressbar animate="true" value="currentPackages" max="totalPackages" type="success">
                        <span style="color:black; white-space:nowrap;">{{currentPackages}} / {{totalPackages}}</span>
                    </uib-progressbar>
                </div>
            </div>

            <div class="panel-group estimate__panel__error--fixedBottom" ng-show="errors.length > 0" ng-click="showErrors()">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            Errores en la hoja de excel <span class="badge badge--red pull-right">{{errors.length}} +</span>
                        </h4>
                    </div>
                    <div class="panel-body scroll-y">
                        <ul class="list-group">
                            <li class="list-group-item withoutBorder" ng-repeat="e in errors track by $index">
                                Ha ocurrido un error en la columna: {{e.column}}, <br /> {{e.message}} en la fila: {{e.row}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

possible duplication to this question:

Clicking a checkbox with ng-click does not update the model

change ng-click to ng-change

Answer 2

You will need to wrap your generated html into Anguler.element()

Anguler.element()

This is because otherwise your generated html is not compiled and angular will not be able to trigger any of your template listeners (ng-click, ng-change,etc)

Answer 3

The problem is that chkallonclick is not exposed to the scope.

Angular evaluates ng-click/ng-whatever against the current scope, your function is not bound to any scope. You have to bound that function to a scope (by using $scope service or a directive controller with bindToController:true/controllerAs:'myCtrl')