Checkbox change event inside a angular js directive is not working

Question

This is an angularjs directive. I have added this in html directive.

app.directive("propertyArea", ['$window','$compile', function ($window, $compile) {
    return {
        restrict: "EA",

        link: function (scope, el, attrs) {
            var $el = angular.element(el);
            var $mainDiv = angular.element('<div class="theme-logo2"></div>');
            $el.append($mainDiv);
            scope.IdentityPropertyclick = function () {
                if ($window.IdentityAdded) {
                    var $mainDiv = angular.element(el).find('.theme-logo2');
                    var $fontsize = [
                        '10,10',
                        '20,20'
                    ];
                    var $fonts = [
                        'Arial,Arial',
                        'Arial Black,Arial Black',
                        'Comic Sans MS,Comic Sans MS',
                        'Courier New,Courier New',
                        'Georgia,Georgia',
                        'Impact,Charcoal',
                        'Lucida Console,Monaco',
                        'Lucida Sans Unicode,Lucida Grande',
                        'Palatino Linotype,Book Antiqua',
                        'Tahoma,Geneva',
                        'Times New Roman,Times',
                        'Trebuchet MS,Helvetica',
                        'Verdana,Geneva',
                        'Gill Sans,Geneva'
                    ];                   
                    var $fontCalibrateDiv = angular.element('<div style="background: white;'+
                        'text-align: center;padding: 8px;"><div class="row" ><select id="fontFamilySelect"'+ 'style="margin:2px;">'+    
                        '</select><select id="fontSizeSelect" style="margin:2px;">'+
                        '</select></div ><div class="row"><span style="margin:2px;" class="mouseOver">B</span><span class="mouseOver"'+ 'style="margin:2px;"> <i>I</i>'+
                        '</span ><span style="text-decoration: underline;margin:2px;" class="mouseOver">U</span>' +         
                        '<span style="margin:2px;"><div id="paintCan" class="input-group colorpicker-component">'+
                        '<input type= "hidden" value= "#00AABB" /><span class="input-group-addon"><i></i></span>'+
                        '</div ></span>'+
                        '</div ></div > ');
                    $fontCalibrateDiv.find('#paintCan').colorpicker();
                    var $fontFamilySelect = $fontCalibrateDiv.find("#fontFamilySelect");

                    angular.forEach($fonts, function (val, key) {
                        var sp = val.split(",");
                        $fontFamilySelect.append('<option style="font-family:' + sp[1] + '" value=' + sp[1] + '>' + sp[0] + '</option>');
                    });

                    var $fontSizeSelect = $fontCalibrateDiv.find("#fontSizeSelect");
                    angular.forEach($fontsize, function (val, key) {
                        var sp = val.split(",");
                        $fontSizeSelect.append('<option value=' + sp[1] + '>' + sp[0] + '</option>');
                    });


                    $mainDiv.append($fontCalibrateDiv);

                    var $logoCheckbox = angular.element('<input type="checkbox" name="identityLogo"'+ 
                        'value="Logo"  />').on('change', function () { alert(); });
                    compiled = $compile($logoCheckbox)(scope);



                    var $hideShowDiv = angular.element('<div style="background: white;' +
                        'text-align:start;padding: 8px;margin-top: 10px;padding-left: 63px;">' +
                        '<div class="row">' + $logoCheckbox["0"].outerHTML +'LOGO</div>' +
                        '<div class="row"><input type="checkbox" name="identityName" value="Name"/>NAME</div>' +
                        '<div class="row"><input type="checkbox" name="identityDateAndTime" value="DateAndTime"/>'+
                        'DATE & TIME</div ></div > ');


                    $mainDiv.append($hideShowDiv);


                } else {
                    $el.empty();
                    var $mainDiv = angular.element('<div class="theme-logo2"></div>');
                    $el.append($mainDiv);

                }
            }

        }
    };
}]);

There a checkbox named identityLogo I am trying to attach change event to it , but it looks like event is not attaching. I am trying to figure out why, but cannot find, what I need to correct, perhaps in the directive there is something wrong I have once done this kind of work and in that directive it is working fine.

Answer 1

You're attaching the event handler to an input field in $logoCheckbox , but you don't attach $logoCheckbox to the DOM; instead, you're grabbing the outerHTML and creating a new input with no event handlers in $hideShowDiv