AngularJs Directive don't update itself for source element's attribute updates

Issue

tried almost everything but not succeed.

I wanted to take an action only if I click on an element whose class name is "ion-android-favorite-outline".

My source element is like below

<i id="{{product.product_code}}" class="icon ion-android-favorite-outline"></i>

I am able to do it using "restrict:'C'" in the directive code.

In the directive, once I am done with data processing, I am changing source element's class to "ion-android-favorite" as below.

.directive(
    "ionAndroidFavoriteOutline",
    function(sessionStorageService, productService){
        return{
            restrict: 'C',
            link: function(scope, element, attrs) {
                element.bind("click" , function(e){
                    var productCode =   attrs.id;
                    console.log(attrs.class);   // on every click i get class name as 'ion-android-favorite-outline' event though html has class name as 'ion-android-favorite'
                    if (sessionStorageService.isLoggedIn()) {
                        productService.trackProduct(productCode).then(function(response){
                            if (response.data.status == "success") {
                                element.removeClass("ion-android-favorite-outline").addClass("ion-android-favorite");
                            } else {
                                element.removeClass("ion-android-favorite").addClass("ion-android-favorite-outline");
                            }
                        });

                        scope.$apply();
                    }

I can see source element's class name getting changed and its reflection in the UI as well.

However, if I again click on the source element (whose class is changed in previous click action ) still invokes the directive code.

Why ???

I tried scope.$apply , replace: true etc ... but no workaround.

Plz help.

Solution

@stephan, answered correctly.

element.unbind("click");

Answered By - Tech Boost