ng-click not working on a custom directive

Question

I am trying to use ng-click directive on a custom directive but it doesn't seem to execute the associated function defined in the controller. Looks like I am missing something very obvious. Please help. Thanks.

HTML:

<tab-link class="checked" ng-click="onEdit('performance')" href="#" value="Performance"></tab-link>
<tab-link href="#/planning" ng-click="onEdit('forecast')" value="Forecast"></tab-link>

Directive:

.directive('tabLink', function () {
    return {
        restrict: 'E',
        template: "<a class='tab-link'><span></span></a>",
        replace: true,
        scope: {
            text: '=',
            value: '@'
        },
        link: function (scope, element) {
            $(function () {
                var span = element[0].children[0];
                span.innerHTML = scope.value;

                $(element[0]).on("click", function (e) {
                    $.each($(".tab-link"), function (index, el) {
                        if (el != element[0]) {
                            if ($(el).hasClass("checked")) {
                                $(el).removeClass("checked");
                            }
                        } else {
                            if (!$(el).hasClass("checked")) {
                                $(el).addClass("checked");
                            }
                        }
                    });
                })
            });
        }
    }
})

Controller:

$scope.onEdit = function(page) {
    console.log(msg);
};

Answer 1

You can check the alert.

$scope.onEdit = function(page) {
    alert(page);
    console.log(page);
};