javascript - How to dynamically update directive once user is logged in? -

i have app navbar directive , basic sign up/log in functionality. want change of words on nav bar (from 'signup/login' 'sign out') once user logged in, can't figure out best (or one) way this. i've tried setting value of variable/binding want change factory gets updated when user logs in, doesn't work, , directive doesn't update new value.

my code attached below, specific solutions appreciated not necessary, if can point me in right direction how helpful.

solutions i've tried:

• factories
  1. setting binding variables equal factory variables updated
  2. setting binding variables equal output of getter statements variables
• cookies (would prefer avoid unless convinces me it's way of solving this)
  3. setting binding variables equal values in cookies

unfortunately none of these cause directive variable dynamically update well. feel solution simple can't think of should doing.

potential solutions:

• using routing, e.g. changing view 1 navbar when user logged in, although seems clunky
• $rootscope (not entirely sure how use , i'm guessing it's wrong use anyway)

navbar.html

<nav class="navbar navbar-static-top navbar-inverse">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand" href="#/">         <span class="glyphicon glyphicon-star"></span> home       </a>     </div>      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6">       <ul class="nav navbar-nav">         <li><a ui-sref="message">message</a></li>         <li><a ui-sref="list">user list</a></li>         <li><a ui-sref="schedule">schedule</a></li>       </ul>        <ul class="nav navbar-nav navbar-right">         <li><a ng-href="{{ vm.accountstatuslink }}">{{ vm.accountstatus }}</a></li>       </ul>     </div>   </div> </nav> 

navbar.directive.js

(function() {   'use strict';    angular     .module('app')     .directive('mainnavbar', mainnavbar);    mainnavbar.$inject = ['userfactory'];    function mainnavbar(userfactory) {     var directive = {       restrict: 'e',       templateurl: 'app/components/navbar/navbar.html',       scope: {           creationdate: '='       },       controller: navbarcontroller,       controlleras: 'vm',       bindtocontroller: true     };      return directive;       function navbarcontroller() {       var vm = this;       // solution 1 (doesn't work)       vm.accountstatus = userfactory.userstatus;       vm.accountstatuslink = userfactory.userstatuslink;       // solution 2 (doesn't work)       //vm.accountstatus = userfactory.getuserstatus();       //vm.accountstatuslink = userfactory.getuserstatuslink();     }   }  })(); 

user.factory.js

(function() {   'use strict'    angular     .module('app')     .factory('userfactory', userfactory);    userfactory.$inject = ['$http', '$cookies'];    function userfactory($http, $cookies) {     var userstatuslink = '#/user/';     var userstatus = 'sign / log in';     var service = {       verifyuser: verifyuser,       storeuser: storeuser,       userstatuslink: userstatuslink,       userstatus: userstatus     };     return service;      /* verifyuser() snip */      function storeuser(user) {       $cookies.putobject('user', user); // stores user obj in cookies       userstatuslink = '#/signout/';       userstatus = 'sign out';     }      /* solution 2 getters      function getuserstatus() {         return userstatus;     }      function getuserstatuslink() {         return userstatuslink;     }      */    }  })(); 

update:

userfactory.storeuser(user) happening asynchronously inside of .success callback:

$http.post('someurl').success(function(user) {     userfactory.storeuser(user); }); 

have tried making getuserstatuslink , getuserstatus method, , binding view methods instead?

function userfactory($http, $cookies) {   ...   var service = {     ...     getuserstatuslink: function() {       return userstatuslink;     },     getuserstatus:  function() {       return userstatus;     }   };   ... } 

and in navbar controller:

function navbarcontroller() {   ...   vm.accountstatuslink = userfactory.getuserstatuslink();   vm.accountstatus = userfactory.getuserstatus(); } 

this should looking when userstatuslink , userstatus updated in userfactory.

update:

since storeuser() method being called asynchronously, not triggering digest cycle happen when new values set. should force angular perform digest cycle using $timeout service:

userfactory.$inject = [ ..., '$timeout'];  function userfactory( ..., $timeout) {   ...   function storeuser(user) {     ...     // forces angular perform digest cycle, refreshing view     $timeout(function() {       userstatuslink = '#/signout/';       userstatus = 'sign out';     });   }   ... } 

update 2:

working jsfiddle implementation. included 2 methods can see difference in using $timeout , not using $timeout: http://jsfiddle.net/hb7lu/15366/

i steered wrong in 1 place, update controller variables access method directly so:

function navbarcontroller() {   ...   // remove parens @ end of userfactory.getuserstatuslink();   vm.accountstatuslink = userfactory.getuserstatuslink;   // remove parens @ end of userfactory.getuserstatus();   vm.accountstatus = userfactory.getuserstatus; } 

and update view call methods:

<!-- add parens view make call methods --> <li><a ng-href="{{ vm.accountstatuslink() }}">{{ vm.accountstatus() }}</a></li> 

final update:

turns out $timeout unnecessary, since angular performs digest cycle in success callback of $http service. updating view access method directly enough fix it.