Typeerror - Not a function in angular directive
<p>I have defined a custom click directive as below:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>(function() {
    
    'use strict';
    angular.module('myApp.core')
        .directive('customClick', customClick);

        customClick.$inject = ['$rootScope'];

        function customClick() {
            return {
                restrict: 'A',
                /*scope: {
                    customClick: '&amp;'  
                },*/
                link: function(scope, element, attrs){
                   $(element).on('click', function(e) {
                        scope.$apply(function() {
                            console.log("Hello..customClick..");
                            scope.customClick();
                        });
                    });
                }
          };
        }
})();</code></pre>
</div>
</div>
</p>

<p>And I get the following error on this;</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>Error logged by WDPR Angular Error handler service {xx.."stacktrace":"TypeError: a.customClick is not a function","cause":"unknown cause"}(anonymous function)bowerComponents.js:5745</code></pre>
</div>
</div>
</p>

<p>How can I resolve this? If I add scope with '&amp;' I get demanding isolated scope. Hence how to resolve it?</p>

<p>If I remove -  scope.customClick();, it does not show anything on second html for custom-click, it has impact on only 1 html, and its controller. I want to use it in multiple controller + html.</p>