watch on custom directive attribute not changing on parents scope change

Question

I have a custom directive inside another custom directive and I want the sub directive to change when it's parent changes a scope value.

the html of the parent directive has a scope variable called childHeight and I have a function that sets it.

<button ng-on-click="setHeight(500)"> change the height </button>
<child-directive ctrl-height="childHeight"></child-directive>

the child directive has a watch on the ctrlHeight

scope: {
        ctrlHeight: '=?',
        ctrlWidth: '=?'
    },
link: function (scope, element, attrs) {
        scope.$watchCollection(['ctrlHeight', 'ctrlWidth'], function() {
                scope.reSize(scope.ctrlWidth, scope.ctrlHeight);
        });
    }

When I change the scope variable in the setHeight

$scope.childHeight = 500;

how come the watch is not triggered.

I tried adding an $apply() or $digest both of which give me an error

Answer 1

If you need to watch both ctrlHeight and ctrlWidth , you could try something like this:
scope.$watch('ctrlHeight + ctrlWidth', watcher);
That way, everytime each of them changes, your watcher fn is triggered. Also $apply() will not work because you're already in Angular context.