title: Page not loading when using $location.path in angularJS
body: <p>I am trying to do load an html page using angularJS.</p>
  
  <p>My HTML page is like:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;title&gt;TSAPI Profiles list&lt;/title&gt;
  &lt;script src="https://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
      .container{
          margin: 20px;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container" ng-app="TSAPIProfiles" ng-controller="TSAPIController"&gt;
  
          &lt;div class="col-md-4"&gt;
          &lt;p&gt; &lt;h4&gt; TSAPI Profiles &lt;/h4&gt; &lt;br&gt;&lt;br&gt;&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;table class="table table-bordered"&gt;
  
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td&gt;TSAPIProfile Name&lt;/td&gt;
                      &lt;td&gt;ACD#&lt;/td&gt;
                      &lt;td&gt;HUB...&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;AESServerPrimary&lt;/td&gt;
                      &lt;td&gt;NorthACDTSAPI1&lt;/td&gt;
                      &lt;td&gt;NorthACD&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;North&lt;/td&gt;
                      &lt;td&gt;AESNorth1&lt;/td&gt;
                      &lt;td&gt;ManualCBSDetails&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;!-- Button --&gt;
          &lt;div class="btn-group-justified" &gt;
  
                &lt;div class="col-md-4" style="margin-left: 400px;" &gt;
                  &lt;button name="savebutton" class="btn btn-primary" type="button" ng-click="add()"&gt;Add&lt;/button&gt;
                  &lt;button name="resetbutton" class="btn btn-primary" type="button" ng-click="edit()"&gt;Edit&lt;/button&gt;
                  &lt;button name="cancelbutton" class="btn btn-primary" type="button" ng-click="remove()"&gt;Remove&lt;/button&gt;
                &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;   
  </code></pre>
  
  <p>And my JS file is like:</p>
  
  <pre><code> var app = angular.module('TSAPIProfiles', [])
      app.controller('TSAPIController',['$scope','$location', function ($scope,$location) {
         $scope.add = function () {
          $location.path('TSAPIProfileCreate.html');
          }
  
      }]);
  </code></pre>
  
  <p>When I click on add button it doesn't load the <code>TSAPIProfileCreate.html</code>. I could not able to find the reason.</p>