AngularJS trigger a function on Attribute Changes in a Directive

Question

we have a directive called actingAs defined as below.

angular.module('MyApp').directive('actingAs', function () {
    return {
        controller: 'ActingAsController',
        controllerAs: 'vm',
        bindToController: true,
        restrict: 'E',
        transclude: true,
        scope: {
            'onself': '&onSelf',
            'onuser': '&onUser',
            'onupdate': '&onUpdate',
            'actingAsFullNm': '=',
            'actingAsType': '='
        },
        link: function (scope, element, attributes, controller) {
            attributes.$observe('actingAsFullNm', function (oldval, newval) {
                console.log("In Observe Function");
                if (oldval != newval) {
                    console.log( 'Acting as FullNmae changed from : '+oldval+' to: '+newval);
                }
                else  {
                    console.log('Acting as FullNmae oldval :' + oldval + ' newVal: ' + newval);
                }
            });
        },
        templateUrl: 'actingAs.directive.html'
    };
});

its used as below on the Page

<acting-as on-self="vm.runAsSelf()" on-user="vm.runAsUser(user, type)" on-update="vm.update(idsid)"
               acting-as-full-nm="vm.actingAsFullNm" acting-as-type="vm.actingAsType"></acting-as>

The vm.actingAsFullNm is updated on the parent page scope where this directive is place. we want to trigger a function or do something in the directive controller upon this value change. Hence we are using the Link function in the directive definition . But for some reason Link function is only being executed once when page loads. Further changes to vm.actingAsFullNm are not triggering Link function. Not sure what are we missing.

Edit:

I also used scope.$watch as below

link: function (scope, element, attributes, controller) {
            scope.$watch('actingAsFullNm', function (oldval, newval) {
                console.log("In Observe Function");
                if (oldval != newval) {
                    console.log( 'Acting as FullNmae changed from : '+oldval+' to: '+newval);
                }
                else  {
                    console.log('Acting as FullNmae oldval :' + oldval + ' newVal: ' + newval);
                }
            });
        },

still the Console.log in link function is executed only once..not when the value changes

Answer 1

I believe you need you need to use $watch instead.

observe vs watch https://stackoverflow.com/a/14907826/5781575

Answer 2

If you are using AngularJs version >= 1.5, i would suggest you to change your directive to component(Components have a well-defined lifecycle which is close to new Angular), and you can detect the changes via $onChanges hook.

If you do not have plan to change it to component, you can use scope.watch as the other one suggested.

scope.$watch('actingAsFullNm', function () {
    ...
});