Directive on click event listener and $postLink click event listener not working together

i am using angular1's component design to build this application. i have made a directive with does the ripple effect on a button when user clicks on it. this is a common behaviour so i have taken it in the directive. now i want to add another event listener to the same button from the component controllers $postLink() hook which causes directive event listener to fail in execution.

how to solve this issue. i want both events listened.

below is my ripple effect directive. i am using commonjs to load the modules so don't be bothered by that.

var app=require('../../../../Development/Assets/Js/appConfig');
app.directive('wave',waveConig);
waveConig.$inject=['$compile','$timeout'];
function waveConig($compile,$timeout){
return{
  restrict:'A',
  link:waveLink
};
function waveLink(scope,elem,attr){
  var waveColor = attr.color;
    elem.unbind('mousedown').bind('mousedown', function (ev) {
        var el = elem[0].getBoundingClientRect();
        var top = el.top;
        var left = el.left;
        var mX = ev.clientX - left;
        var mY = ev.clientY - top;
        var height = elem[0].clientHeight;
        var rippler = angular.element('<div/>').addClass('wave');
        rippler.css({
            top: mY + 'px',
            left: mX + 'px',
            height: (height / 2) + 'px',
            width: (height / 2) + 'px',
        });
        if (waveColor !== undefined || waveColor !== "") {
            rippler.css('background-color', waveColor);
        }
        angular.element(elem).append(rippler);
        $compile(elem.contents())(scope);

        $timeout(function () {
            angular.element(rippler).remove();
        }, 500);

    });
}
}

below is my component controller code.

verifyCtr.$inject=['$element','verifyService','$scope'];
function verifyCtr($element,verifyService,$scope){
   console.log('verify component is up and working');
var $this=this;

var serviceObj={
    baseUrlType:'recommender',
    url:'https://httpbin.org/ip',
    method:1,
    data:{}
};

$this.$onInit=function(){
    verifyService.getData(serviceObj,{
        success:function(status,message,data){
            $this.data=data;
        },
        error:function(status,message){
            alert(status,'\n',message);
        }
    });
};
$this.$onChanges=function(changes){};
$this.$postLink=function(){
    angular.element(document.querySelector('.addNewTag')).bind('click',function(){
 console.log('hi there you clicked this btn');
});
};
$this.$onDestroy=function(){
    angular.element(document.querySelector('.addNewTag')).unbind('click');
    var removeListener=$scope.$on('someEvent',function(ev){});
    removeListener();
};
}module.exports=verifyCtr;

when i run it. the component click event-listener is fired. but the directive fails to execute. i don't know whats causing this issue and i want both of them to work.

it took a while to figure it out.

document.querySelector('.class-name') ;

returns a array of html elements. and

angular.element(elem).bind() 

works on one single angular element. so i had to use a unique way of identifying the element i,e by the Id. so what i did was

angular.element(document.querySelector('#id')).bind();

there is other ways of doing it by the classname also . we can itreate over the array and get our element and bind the event to it.