title: Reloading the complete page in angularjs after setting a $scope value
body: <p>My application has a login page(<strong>login.html</strong>) and a welcome page(<strong>welcome.html</strong>). Both these pages are loaded inside a <strong>Main.html</strong> using <strong>'ng-view'</strong>.</p>
  
  <p>When a user try to access the path </p>
  
  <blockquote>
    <p><a href="http://localhost:8080/MyContext/login" rel="nofollow noreferrer">http://localhost:8080/MyContext/login</a></p>
  </blockquote>
  
  <p>user will be redirected to a login page, where he can enter his credentials and login. Once used logged in successfully, a scope variable($scope.user) is set and the application redirects to welcome.html</p>
  
  <blockquote>
    <p>$scope.user=user;</p>
  </blockquote>
  
  <p>before that I am initializing the same scope variable as null at the beginning of the controller.
  There is a navigation bar at the top of Main.html. I am hiding it if the 'user' is not available using '<strong>ng-show</strong>'. This is because I want to show this nav bar only to logged in user. </p>
  
  <p>So I am expecting it to be shown for welcome.html. That is not happening. I believe the ng-view is not reloading the entire html(Main.html) page. How can i solve this?</p>
  
  <p><strong>Main.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="MainModule"&gt;
  &lt;head&gt;
  &lt;base href="/Utility/"&gt;
  &lt;title&gt;UTILITY&lt;/title&gt;
  &lt;link
      href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"
      rel="stylesheet"&gt;
  &lt;script
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script
      src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;script data-require="angular.js@1.6.5" data-semver="1.6.5"
      src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"&gt;&lt;/script&gt;
  &lt;script data-require="angular-route@*" data-semver="1.6.2"
      src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"&gt;&lt;/script&gt;
  &lt;script data-require="ngstorage@*" data-semver="0.3.6"
      src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;script src="login/login.controller.js"&gt;&lt;/script&gt;
  &lt;script src="login/login.service.js"&gt;&lt;/script&gt;
  &lt;script src="welcome/welcome.controller.js"&gt;&lt;/script&gt;
  &lt;link href="login/signin.css" rel="stylesheet" type="text/css"&gt;
  
  
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div ng-show="user"&gt;
          &lt;!-- nav bar container --&gt;
          &lt;nav class="navbar navbar-default"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;a class="navbar-brand" href="#"&gt;UTILITY&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div id="navbar" class="navbar-collapse collapse"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle"
                              data-toggle="dropdown" role="button" aria-haspopup="true"
                              aria-expanded="false"&gt;Drop Down 1&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;&lt;/li&gt;
  
                          &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle"
                              data-toggle="dropdown" role="button" aria-haspopup="true"
                              aria-expanded="false"&gt;Drop Down 2&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Logout&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;!--/.nav-collapse --&gt;
              &lt;/div&gt;
              &lt;!--/.container-fluid --&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  
  
      &lt;div ng-view&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>(function() {
  
      var mainModule = angular.module("MainModule", [ "ngRoute","ngStorage" ]);
  
      mainModule.config(function($routeProvider,$locationProvider) {
  
          $routeProvider.when("/login", {
              templateUrl : "login/Login.html",
              controller : "LoginController"
          }).when("/user/:username", {
              templateUrl : "welcome/welcome.html",
              controller: "WelcomeController"
          }).otherwise({
              redirectTo : "/login"
          });
  
          //$locationProvider.html5Mode(true);
  
      });
  
  }());
  </code></pre>
  
  <p><strong>login.controller.js</strong></p>
  
  <pre><code>(function() {
  
      var loginModule = angular.module("MainModule");
  
      var LoginController = function($log, $scope, $sessionStorage, UserService, $location) {
          $scope.user = null;
  
          var userFound = function(userData) {
              $scope.user = userData;
              $scope.message = "Successful Login";
  
              //store the user information here for session management
              $sessionStorage.user = $scope.user;
  
              //window.location.replace("/user/"+$scope.user.userName);
              $location.path("/user/"+$scope.user.userName);
          };
  
          var onError = function(errorResponse) {
              $scope.message = "Invalid User";
          };
  
          $scope.submitLogin = function(username, password) {
              UserService.getUser(username, btoa(password)).then(userFound,
                      onError);
          };
  
      };
  
      loginModule.controller("LoginController", LoginController);
  
  }());
  </code></pre>
  
  <p><strong>welcome.controller.js</strong></p>
  
  <pre><code>(function(){
      var loginModule = angular.module("MainModule");
  
  
      var WelcomeController = function($window, $scope){
  
          $scope.initWelcome = function(){
              $window.location.reload();
          }
      };
  
  
      loginModule.controller("WelcomeController", WelcomeController);
  
  }());
  </code></pre>