title: AngularJS show login/logout button conditionally in navbar on app page
body: <p><strong>Main.jsp</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;body ng-app="myApp"&gt;
  
  &lt;div class="navbar"&gt;
     &lt;a href="/order"&gt; View Orders &lt;/a&gt;
     &lt;a href="/logout" ng-show="$scope.isUserLoggedIn"&gt; Logout &lt;/label&gt;
     &lt;a href="/login" ng-show="!$scope.isUserLoggedIn"&gt; Login &lt;/label&gt;    
  &lt;/div&gt;
  &lt;div ng-view&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><br>
  <strong>Controllers</strong></p>
  
  <pre><code>var myApp = angular.module('myApp', ['ngRoute']);
  ...    
              // route for the default home page
              .when('/', {
                  templateUrl : function($node, tattrs) {
                        return "resources/html/home.html";
                  },
                  controller  : 'mainController'
              })
  
  
              // route for the order page
              .when('/order', {
                  templateUrl : function($node, tattrs) {
                        return "resources/html/order.html";
                  },
                  controller  : 'orderController'
              })
  </code></pre>
  
  <p>....</p>
  
  <pre><code>myApp.controller('mainController', function($scope, $http) {
      ....
      $scope.isUserLoggedIn = true; //or false
  .....
  </code></pre>
  
  <p><br>
  <strong>Question:</strong><br>
  The $scope.isUserLoggedIn is having no effect on Login/Logout hrefs. The scope is probably not accessible on the main app page (i.e in the navbar in the ng-app page).</p>
  
  <p>I want to show hide the Login/Logout button conditionally. Any ideas?</p>