AngularJS using $watch in controllers

Question

So I have been reading this article which suggests using $watch in your controllers is bad. I am trying to take the advice. I have controller that looks like this:

.controller('NavigationController', ['$rootScope', '$scope', function ($rootScope, $scope) {
    var self = this;

    // Get our current user
    self.user = $rootScope.user;

    // Watch
    $scope.$watch(function () {

        // Return our user
        return $rootScope.user;
    }, function (user) {

        // Set our user to the new user
        self.user = user;
    });
}]);

and my HTML looks like this:

<div class="account-header" ng-controller="NavigationController as controller" ng-cloak ng-show="controller.user.authenticated">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <nav class="navbar navbar-account">
                    <div class="collapse navbar-collapse" id="account-menu">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="dropdown" dropdown>
                                <a class="dropdown-toggle" dropdown-toggle>{{ controller.user.userName }} <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a ui-sref="teams">Team settings</a></li>
                                    <li><a ui-sref="account">Account settings</a></li>
                                    <li><a ui-sref="logout">Sign out</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</div>

You can see that I am only showing the account menu when the user is logged in. After reading the article, I am struggling to see how I can actually change my controller.

Does anyone have any suggestions?

Update 1

Some of you have said because it is in the rootscope, I don't have to do anything. I can just use user in the HTML and it should work fine. I tested this like this:

<div class="account-header" ng-cloak ng-show="user.authenticated">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <nav class="navbar navbar-account">
                    <div class="collapse navbar-collapse" id="account-menu">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="dropdown" dropdown>
                                <a class="dropdown-toggle" dropdown-toggle>{{ user.userName }} <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a ui-sref="teams">Team settings</a></li>
                                    <li><a ui-sref="account">Account settings</a></li>
                                    <li><a ui-sref="logout">Sign out</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</div>

and it did work. Now what I want to do is add another menu item, this item is only shown if there are any kits. But I would rather not do a API call on every state change, so the only thing I can see is to amend something when a kit is either added or deleted. But I am not sure what is the best way to do this.

Answer 1

When the user changes broadcast a 'userLoggin' event on the $rootScope. Then listen for that event in your controller.

Or $emit the event on $rootScope and in the controller listen on the $rootScope by injecting it.

$rootScope.$on('userLoggin' function() {
    // React to user change.
})