I have an HTML div , like

<div id="loader-container" data-ng-controller="LoaderController" ng-show="shouldShow">
Some html design
</div>

And in my controller

angular.module('core').controller('LoaderController', ['$scope','$location', 'Authentication', '$rootScope',
function($scope,$location, Authentication, $rootScope) {
    $scope.shouldShow = true;
}

]);

And now, I want to hide that html div from another controller, That's why I tried to make $scope.shouldShow variable as false from another controller. So how can I make

$scope.shouldShow = false;

from another controller. Is it possible or any alternative way.?

I have an HTML div , like

<div id="loader-container" data-ng-controller="LoaderController" ng-show="shouldShow">
Some html design
</div>

And in my controller

angular.module('core').controller('LoaderController', ['$scope','$location', 'Authentication', '$rootScope',
function($scope,$location, Authentication, $rootScope) {
    $scope.shouldShow = true;
}

]);

And now, I want to hide that html div from another controller, That's why I tried to make $scope.shouldShow variable as false from another controller. So how can I make

$scope.shouldShow = false;

from another controller. Is it possible or any alternative way.?

• javascript
• angularjs

• @Claies is it... or is it a newly generated object for each controller to use. As per the source code. I think you maybe getting confused with $rootScope? – Callum Linington Commented Mar 2, 2015 at 9:42
• why you don't maintain this variable inside service/factory? – Pankaj Parkar Commented Mar 2, 2015 at 19:55

2 Answers 2

every controller will create a new Scope.

Hence the changing the scope in one controller will not reflect in the scope of other controller.

If you want to share a property across the controllers create that variable on the $rootScope and use it.

In Controller

$scope.$root.shouldShow = true; //or false

In Markup

<div ng-show="$root.shouldShow"></div>

It's not a good idea to manipulate a $scope of a controller from a different controller directly. It would make your controllers very tightly coupled.

One monly accepted way to municate between controllers is through messages using the publish-subscribe pattern.

If your controllers are in pletely separate ponents and you just need to notify the other controller, you can use the $broadcast/$emit and $on methods of the scope object to broadcast a message from one controller and listening to a specific message in a different controller. When an action happens that should change the shouldShow variable, you can just broadcast a message and make the other controller listen and act on it.

Root Scope API

Another mon way to municate between controllers is by using angular services, acting as a mediator between controllers.

If your controllers are part of the same ponent/module, and you need to share state/behavior between those, then using an angular service to encapsulate that logic and expose it would be an OK approach (services are singletons in Angular). That would be pretty simple to implement.

However, not knowing more details about your exact requirements, it's hard to design a proper solution.

Thanks to @Callum Linington for discussing the alternatives in the ments.