title: Angular call different controller methods for different urls
body: <p>I have a single page application in which the footer contains multiple links for About, FAQs, Privacy etc. Currently i am using angular-strap modal to show a modal for each link. The code for that looks like as follows:</p>
  
  <pre><code> &lt;li&gt;
       &lt;a href="#about" id="about" 
       data-modal-class="my_modal gradient-body"
       data-bs-modal="'templates/about.html'"&gt;About
       &lt;/a&gt;
   &lt;/li&gt;
  </code></pre>
  
  <p>So currently the url of my application won't change on clicking About link. It will simply launch the modal . 
  Now i want to keep the functionality same but have a url like mydomain.com/#about to launch the about box.  </p>
  
  <p>I am using $routeProvider to define routes as follows:</p>
  
  <pre><code> $routeProvider
      .when('/home', {
        templateUrl: 'templates/map.html'      
      })
      .when('/verify/:code',{
        template : " ",
        controller : 'VerifyReportCtrl'
      })    
      .otherwise({ redirectTo: '/home' });
  </code></pre>
  
  <p>The reason why i want to do it is because it will help in SEO of my application. Currently there is no way to index the About page content.</p>