javascript - angular directive compile/link not getting called -

i trying catch anchor clicks , play href's. have written below directive

app.directive('a', function() {         return {             restrict: 'e',             link: function(scope, elem, attrs) {                 if(attrs.ngclick || attrs.href === '' || attrs.href === '#'){                     elem.on('click', function(e){                         alert(attrs.href);                         e.preventdefault();                     });                 }             }         };     }) 

i have tried giving in app.js in myctrl.js files. module declartion way in myctrl.js:

var appcontrollers = angular.module('starter.controllers'); appcontrollers 

its working in ionic project. not sure going wrong. can me?

updated answer after reading comments

you can override a directive. have make sure override default behaviour prevent angularjs overridden anchor tab click handler firing.

app.directive('a', function() {   return {     restrict: 'e',     scope: true,     compile: function(element, attr) {       element.bind('click', function(event) {         alert('clicked on link: ' + attr.href)         event.preventdefault(); // important       });     }   } }); 

also when trying bind html, might wanna make sure compile make sure anchor tag directive kicks in. there directive can you:

app.directive('bindhtmlcompile', ['$compile', function($compile) {   return {     restrict: 'a',     link: function(scope, element, attrs) {       scope.$watch(function() {         return scope.$eval(attrs.bindhtmlcompile);       }, function(value) {         element.html(value);         $compile(element.contents())(scope);       });     }   }; }]); 

source: https://stackoverflow.com/a/29994559/841804

so, instead of ng-bind-html, can use bind-html-compile so:

<span bind-html-compile="gethtml()"></span> 

and finally, here's plunker that: http://plnkr.co/edit/efjw8f40gyiaxo5bdv44?p=preview