title: Angular JS - Login screen shown on page Refresh (F5) of application
body: <p>In Angular SPA application, login screen is show/hide based on ng-show directive variable which is in $rootScope.</p>
  
  <p>If user is in home page and refresh the page (F5), Login screen is shown as Complete page is refreshed and lost root scope variable value.</p>
  
  <p>How to fix this issue? </p>
  
  <p>Code Sample::</p>
  
  <pre><code>&lt;body ng-controller="mainController"&gt;
      &lt;div class="container" ng-controller="schoolLoginCtrl"
          ng-show="showLogin"&gt;
          &lt;form class="form-signin" ng-submit="login()"&gt;
              &lt;h2 class="form-signin-heading"&gt;Login Page&lt;/h2&gt;
              &lt;label for="userName" class="sr-only"&gt;User Name&lt;/label&gt; &lt;input
                  type="text" id="userName" ng-model="user.userName"
                  class="form-control" placeholder="User Name" required autofocus&gt;
              &lt;label for="inputPassword" class="sr-only"&gt;Password&lt;/label&gt; &lt;input
                  type="password" id="inputPassword" ng-model="user.password"
                  class="form-control" placeholder="Password" required&gt;
              &lt;div class="alert alert-danger"&gt;{{errorMsg}}&lt;/div&gt;
              &lt;button class="btn btn-lg btn-primary btn-block" type="submit"&gt;Sign
                  in&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;div class="container" ng-show="!showLogin"&gt;
          &lt;div ng-view&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  
  .controller('mainController', function($scope, $rootScope,
          $location) {
      $rootScope.showLogin = true;
  });
  </code></pre>