title: dynamically change the path of href angular JS
body: <p>I am trying to change the href value on click of it.</p>
  
  <p>This is what I have tried.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a href="#Page1"&gt;Demo&lt;/a&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>    angular.config(function ($routeProvider) {
          $routeProvider
      .when('/Page1', {
              templateUrl: 'main.html'
              controller: 'FirstController'
          })
   .when('/Page2', {
              templateUrl: 'sub.html'
              controller: 'FirstController'
          })
  .otherwise('main.html');
  </code></pre>
  
  <p>How do I change the path of the anchor tag everytime when I clicked on it.</p>
  
  <p>Can anyone please help me out.</p>