title: Make a navbar hide with ng-hide/ng-show
body: <p>I can´t this navbar to show just one of the navbars, it shows both of them. What am I doing wrong?</p>
  
  <p>View: 
      
        </p>
  
  <pre><code>    &lt;!-- Logged in --&gt;
      &lt;div ng-show="loggedIn"&gt;
        Navbar logged in
      &lt;/div&gt;
  
      &lt;!-- Logged out--&gt;
      &lt;div ng-hide="!loggedIn"&gt;
        Navbar logged out
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>.controller('mainCtrl', ['$scope', '$state', 'userService',
    function($scope, $state, userService) {
  
      $scope.loggedIn = userService.isLoggedIn();
  
      $scope.login = function() {
        userService.login();
        $state.go('home');
      };
  
      $scope.logout = function() {
        userService.logout();
        $state.go('login');
      };
  
    }
  ]);
  </code></pre>