Issue with two way binding in AngularJS Component

Question

I'm creating an AngularJS component

var notificationComponent = {
        templateUrl: "notification.html",
        controller: ['$rootScope', notificationController],
        bindings: {
            visible: "="
        }
    };

I want to use in HTML like below:

<notification visible="$rootScope.showNotification"></notification>

Basically I want to control 'visible' property from any other component as true or false.

I tried achieving this by maintaining a variable in $rootScope named showNotification. But if I modify its value from any other component like:

$rootScope.showNotification = true;

Its not changing the 'visible' property value.

As per my understanding following code does a two way binding in AngularJS component.

bindings: {
            visible: "="
        }

Can someone tell me where I am going wrong?

Answer 1

It should $root in view to access $rootScope:

<notification visible="$root.showNotification"></notification>

> demo fiddle