Angular - How to get angular directive to trigger after ng-click handler scope function?

Question

Scenraio

I am pretty new to Angular and have the following issue.

I want to trigger a directive to change color and add an image on a button. I can not get the first if condition to trigger this change in my Angular Directive.

Problem

I want to make the directive take action based on the result from ng-click handler. Even though my debugger shows that directive is being called, I am not getting the first if condition to enter.

Questions

1) What do I need to do to get this to work?

2) Do I need to consider if ng-click is not called before the directive is handled?

HTML

<button class="email-reset-btn"  type="button" ng-click="resetEmailLink();" emailReset="changeBtn();" name="button">Email Reset Link</button>

Scope Level Function

var emailResetValidation = function () {
  if($('#email').val().trim() == "")
  {
    $(".email-reset-btn").removeClass("email-active-green");
  }
}

Directive

.directive('emailReset', [function(){
      return {
        link: function(scope, elem, attrs) {
          elem.bind("click", function(){
            if(!elem.hasClass('email-active-green')) {  <--- Here is where I want the debugger to enter to change the button's HTML
               elem.html("<div class='email-sent-placeholder'><img width='15px' src='./resources/icons/[email protected]'/></div>&nbsp;<div class='email-reset-button-text'>Link Sent</div>");
            }
            else {
               elem.html("Email Reset Link");
            }
          })
        }
      });

Answer 1

if you want to use the emailReset directive.you should set the email-reset in your HTML like this

 <button class="email-reset-btn"  type="button" ng-click="resetEmailLink();" email-reset="changeBtn();" name="button">Email Reset Link</button> 

and I can't understand what the emailReset = "changeBtn()" means?

try to see this plunker