title: How to add $watch to track a value in $cookies inside Angular directive
body: <p>I'm having difficulty getting a directive to update dynamically when a value in $cookies changes. Basically, it is a login/logout system where a custom directive should be displayed or hidden depending on whether the user is logged in or not. Below is the code I have so far. I know my directive is very scrappy and probably bloated but I am trying to get the functionality in place before cleaning it up. </p>
  
  <p>At the moment the <code>adminLogin</code> directive doesn't display after login unless the entire page is manually refreshed. Also, the directive doesn't go away after log out unless I add <code>$scope.loggedInUser = false;</code> to the <code>logout()</code> function, which is not what I want. My question is what is the recommended way to use a <code>$watch</code> inside a directive so that it shows/hides based on the <code>$cookies.loggedInUser</code> value?</p>
  
  <p>I've already tried adding <code>$cookies.loggedInUser</code> as the first param to the <code>$watch</code>function, my logic being any change to its value would trigger the code inside the function but that doesn't seem to work inside the directive and I'm not sure why. </p>
  
  <p>I've spent a couple of days on it now and I think I've tried every angle offered from other SO questions as well as Googling and reading docs. But so far nothing has worked so any guidance is much appreciated!</p>
  
  <p><strong>LOGIN CTRL</strong></p>
  
  <pre><code>.controller('AdminLoginCtrl', ['$scope', '$rootScope', '$location', '$cookies', 'AuthService', 'flashMessageService', '$log',
          function($scope, $rootScope, $location, $cookies, AuthService, flashMessageService, $log) {
            // $scope.adminLoggedIn = false;
  
            $scope.credentials = {
              username: '',
              password: ''
            };
  
            $scope.login = function(credentials) {
              console.log('in login....');
              AuthService.login(credentials).then(
                function(res) {
  
                 // THIS SHOULD BE WATCHED INSIDE DIRECTIVE TO SHOW/HIDE TEMPLATE
                  $cookies.put('loggedInUser', res.data);
  
                  // USER SAVED TO COOKIES FINE HERE
                  console.log('User from Cookies...', $cookies.get("loggedInUser"));
  
                  $location.path('/admin/pages');
                },
                function(err) {
                  flashMessageService.setMessage(err.data);
                  $log.log(err);
                });
              };
          }
      ])
  </code></pre>
  
  <p><strong>LOGGED IN DIRECTIVE</strong></p>
  
  <pre><code>angular.module('myApp.directives', ["ngCookies"])
    .directive('adminLogin', ['$rootScope','$cookies','AuthService','flashMessageService','$location',
      function($rootScope,$cookies,AuthService,flashMessageService,$location) {
        return {
          controller: function($scope, $cookies,$rootScope) {
  
  // CONSOLE LOG IN DIRECTIVE CONFIRMS LOGGED IN USER IS SAVED IN COOKIES
            console.log("Func called in DIRECTIVE ", $cookies.get("loggedInUser"));
            $scope.loggedInUser = $cookies.get("loggedInUser");
  
            /* NEED HELP WITH WATCH IMPLEMENTATION */
            $scope.$watch(/* what to watch */, function(newVal, oldVal) {
              console.log('WATCH ', nVal, oVal);
              /* ??? */
            })
  
            console.log('logInUser In Dir ', $scope.loggedInUser);
  
            $scope.logout = function() {
              console.log('Logout in Directive...');
              AuthService.logout().then(
                function() {
                  $cookies.remove('loggedInUser'); // Want this to be watched
                  $scope.loggedInUser = false; // Works but not ideal!
                  $location.path('/admin/login');
                  flashMessageService.setMessage("Successfully logged out");
  
                }, function(err) {
                    console.log('there was an error tying to logout', err);
                });
            };
  
          },
          templateUrl: 'partials/directives/admin-login.html'
        };
      }
    ])
  </code></pre>
  
  <p><strong>DIRECTIVE TEMPLATE</strong></p>
  
  <pre><code>&lt;div ng-if='loggedInUser'&gt;
      Welcome {{loggedInUser}} |  &lt;a href="admin/pages"&gt;My Admin&lt;/a&gt; | &lt;a href ng-click='logout()'&gt;Logout&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>