title: Displaying username after login with angular
body: <p>I'm playing around with AngularJS and trying to build a very simple app for learning purposes, but i've ran into a problem.</p>
  
  <p>I'm using Kinvey BAAS. So, this is what I'm trying to do:</p>
  
  <ol>
  <li>I have a <strong>login.controller.js</strong>, which looks like this (skipping the module registration and the config parts...):</li>
  </ol>
  
  <p>`</p>
  
  <pre><code>.controller('LoginController', [
      '$scope',
      '$location',
      'users',
  
      function ($scope, $rootScope, $location, users) {
          $scope.login = function login() {
              users.login($scope.user)
                  .then(function (loggedInUser) {
                      $location.path('/home');
                      console.log(loggedInUser);
                  }, function (error) {
                      console.log(error);
                  });
          }
      }
  ])
  </code></pre>
  
  <p>The idea is simple. Use a service to log the user in. Then, redirect him to the homepage (/home).</p>
  
  <ol start="2">
  <li>The authentication service looks like this (<strong>users.js</strong>):</li>
  </ol>
  
  <p>`</p>
  
  <pre><code>.factory('users', [
      '$http',
      '$q',
      '$cookies',
      '$location',
      'BASE_URL',
      'APP_KEY',
      'APP_SECRET',
  
      function ($http, $q, $cookies, $location, BASE_URL, APP_KEY, APP_SECRET) {
  
          var user = undefined;
  
          function login(user) {
              var deferred = $q.defer();
  
              // Get the user information.
              $http.post(BASE_URL + 'user/' + APP_KEY + '/login', {
                  username: user.username,
                  password: user.password
              })
                  .then(function (response) {
                      _preserveUserData(response.data);
                      deferred.resolve(response);
                  }, function (error) {
                      deferred.reject(error);
                  });
  
  
              return deferred.promise;
          }
  
          function _preserveUserData(data) {
              var authToken = data._kmd.authtoken;
  
              $cookies.put('authToken', authToken);
  
              user = data;
          }
  
          function isLogged() {
              if !! (user || $cookies.get('authToken'));
          }
  
          function getLoggedUser() {
              var deferred = $q.defer();
  
              if (user) {
                  deferred.resolve(user);
              } else if ($cookies.get('authToken')) {
                  var authToken = $cookies.get('authToken');
                  $http.defaults.headers.common.Authorization = 'Kinvey ' + authToken;
  
                  $http.get(BASE_URL + 'user/' + APP_KEY + '/_me')
                      .then(function (response) {
                          user = response.data;
  
                          deferred.resolve(response);
                      }, function (error) {
                          deferred.reject(error);
                      });
              } else {
                  deferred.reject('No logged user.');
              }
  
              return deferred.promise;
          }
  
          return {
              login: login,
              isLogged: isLogged,
              getLoggedUser: getLoggedUser
          };
      }
  ]);
  </code></pre>
  
  <p>I also have a main controller (<strong>main.controller.js</strong>). The MainController wraps the whole content with a div (), for binding to the scope some global stuff...like the currently logged user.</p>
  
  <p>`</p>
  
  <pre><code>.controller('MainController', [
      'APP_TITLE',
      '$scope',
      'users',
  
      function (APP_TITLE, $scope, users) {
          // A place to store some more-global stuff.
          $scope.appTitle = APP_TITLE;
          $scope.user = undefined;
  
          if (users.isLogged()) {
              users.getLoggedUser()
                  .then(function (loggedUser) {
                      $scope.user = loggedUser.data;
                  }, function (error) {
                      console.log(error);
                  });
          }
      }
  ])
  </code></pre>
  
  <p>Now, this is the index.html (where the Main controller and the ng-view are):</p>
  
  <pre><code>&lt;body&gt;
      &lt;div ng-controller="MainController" ng-cloak&gt;
  
          &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
                          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;a class="navbar-brand" href="#!/"&gt;{{appTitle}}&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&gt;&lt;a href="#!/home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#!/favorites"&gt;Favorites&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#!/users"&gt;Users&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
  
                      &lt;ul class="nav navbar-nav navbar-right" ng-if="user"&gt;
                          &lt;li class="dropdown"&gt;
                              &lt;a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;{{user.username}}&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="javascript:;"&gt;Links&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="javascript:;"&gt;Edit Profile&lt;/a&gt;&lt;/li&gt;
                                  &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="javascript:;"&gt;Logout&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
              &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
          &lt;/nav&gt;
          &lt;!--[if lt IE 7]&gt;
          &lt;p class="browsehappy"&gt;You are using an &lt;strong&gt;outdated&lt;/strong&gt; browser. Please &lt;a href="http://browsehappy.com/"&gt;upgrade your browser&lt;/a&gt; to improve your experience.&lt;/p&gt;
          &lt;![endif]--&gt;
  
          &lt;div ng-view&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And this is the home.html (where the username should be displayed):</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;h2&gt;Hello, &lt;span ng-if="user"&gt;{{user.username}}&lt;/span&gt;&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The thing is that, when the user is logged, I save a cookie and redirect the logged user...but the MainController doesn't register the logged in user (it never enters the if (users.isLogged()) part). I have to refresh to see the username of the user.</p>
  
  <p>Any guidance on how to solve this problem will be handy. Also code quality and overall code-improvement suggestions will be also highly appreciated.</p>
  
  <p>Thanks in advance!</p>
  
  <p>Borislav.</p>