title: Redirect to another HTML page in Angular JS
body: <p>I've written a simple Login form with no actual server. Just a hard coded login credentials. And if they credentials are matching on angular controller function then I need to show another HTML page. On '/login.html', following code is written</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;title&gt;Login&lt;/title&gt;
  
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="font-awesome/css/font-awesome.css" rel="stylesheet"&gt;
      &lt;link href="css/animate.css" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
      &lt;script type="text/javascript" src="/InfoGraph/js/angular/angular.min.js" &gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/InfoGraph/js/angular/angular-route.min.js" &gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/InfoGraph/js/login.js" &gt;&lt;/script&gt;  
  &lt;/head&gt;
  
  &lt;body class="gray-bg" ng-app="login"&gt;
  
      &lt;div class="middle-box text-center loginscreen  animated fadeInDown"&gt;
          &lt;div&gt;
              &lt;div&gt;
                  &lt;h1 class="logo-name"&gt;IGraph&lt;/h1&gt;
              &lt;/div&gt;
              &lt;h3&gt;Welcome to IGraph&lt;/h3&gt;           
              &lt;form class="m-t" role="form" name="loginToIGraph" ng-controller="LoginController as login"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;input type="text" class="form-control" placeholder="Username" required="" ng-model="user.username" &gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;input type="password" class="form-control" placeholder="Password" required="" ng-model="user.password" &gt;
                  &lt;/div&gt;
                  &lt;button type="submit" class="btn btn-primary block full-width m-b" ng-click="login.loginUser(user)"&gt;Login&lt;/button&gt;
                  &lt;a href="#"&gt;&lt;small&gt;Forgot password?&lt;/small&gt;&lt;/a&gt;
                  &lt;p class="text-muted text-center"&gt;&lt;small&gt;Do not have an account?&lt;/small&gt;&lt;/p&gt;
                  &lt;a class="btn btn-sm btn-white btn-block" href="register.html"&gt;Create an account&lt;/a&gt;
              &lt;/form&gt;           
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>And in '<code>login.js</code>' the code is following :</p>
  
  <pre><code>(function(){
  var app = angular.module('login',[]);
  
  app.controller('LoginController', ['$scope','$location', function($scope,$location)
      {
          $scope.loginUser = function(user){
              if(user.username == 'demo' &amp;&amp; user.password == 'demo'){
                 $location.href('/afterLogin.html');
              }
              else{
                  alert('Wrong credentials')
              }
          }
  
      }]);
  
  })();
  </code></pre>
  
  <p>But on <code>$location.href('/afterLogin.html');</code> , it does nothing. Even there is no error. What could be the cause?</p>