Basic controllers comunication in angular.js <p>I have a project in Angular.js that consist of a login page and another page. I have a common navigation bar that resides in the "Layout", before then ng-view div. This navbar relies on a controller (let's say NavBarController), and based on the authenticated user, it shows some buttons or not. The problem is that when The user Log's in, the next page is loaded on then ng-view, but the NavVar controller do not know about this, so it does not refresh it's $scope, therefore the proper buttons wont show up.</p> <p>I guess my question is: How can I trigger a "Refresh" action on a controller based on another controller's function. ? is that event possible ? or do I have to repeat the nav bar inside every controller's html ?</p> <p>Here's my main html: </p> <pre><code>&lt;div ng-app='theApp'&gt; &lt;div data-ng-controller="NavBarController"&gt; &lt;nav class="navbar navbar-default" role="navigation"&gt; &lt;div class="container-fluid"&gt; &lt;div class="navbar-header"&gt; &lt;a class="navbar-brand"&gt;The App&lt;/a&gt; &lt;/div&gt; &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt; &lt;ul class="nav navbar-nav"&gt; &lt;li class="active" ng-show="user.role == 'admin'"&gt;&lt;a href="#"&gt;Link visible only by admin&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Link visible by all&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;ul class="nav navbar-nav navbar-right"&gt; &lt;li class="dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;{{ user.name }} &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt; &lt;ul class="dropdown-menu"&gt; &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt; &lt;li class="divider"&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" ng-click="LogOut()"&gt;Log out&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/nav&gt; &lt;/div&gt; &lt;div ng-view&gt;&lt;/div&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js" /&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js" /&gt; &lt;script src="app/app.js"&gt;&lt;/script&gt; &lt;!-- controllers --&gt; &lt;script src="app/controllers/membershipController.js"&gt;&lt;/script&gt; &lt;script src="app/controllers/navBarController.js"&gt;&lt;/script&gt; &lt;!-- factories --&gt; &lt;script src="app/factories/membershipFactory.js"&gt;&lt;/script&gt; &lt;!-- services --&gt; &lt;script src="app/services/userService.js"&gt;&lt;/script&gt; &lt;/div&gt; </code></pre> <p>Now, the NavBarController is something like: </p> <pre><code>(function () { var NavBarController = function ($scope, UserService) { function init() { $scope.user = UserService.getUser(); /* functions */ $scope.LogOut = function () { UserService.clearUser(); }; } init(); } NavBarController.$injenct = ['$scope', 'UserService']; angular.module("theApp").controller('NavBarController', NavBarController); }()); </code></pre> <p>The initialization of angular is like: </p> <pre><code>(function() { var theApp = angular.module("theApp", ['ngRoute', 'ngCookies', 'ui.bootstrap']); angular.module("theApp").config(function($routeProvider){ $routeProvider .when('/', { controller: 'MembershipController', templateUrl: 'app/views/login.html' }) .when('/index', { templateUrl: 'app/views/index.html' }) .otherwise ( { redirectTo: '/' } ); }); }()); </code></pre> <p>login.html is just a typical login password page, that triggers the MembershipController Authenticate() function. It redirects to '/index' on successfull authentication and set's the User in the UserService. Now. the index.html page successfully renders at ng-view, but my navbar stays the same (initial state, no show the 'link visible by admin' link, nor the dropdown on the right.</p>