title: MVC5 and Angular.js routing - URLs not matching
body: <p>I'm having some trouble with routing in Angular.js and MVC5. I've simplified it down to the example below.</p>
  
  <p>My angular routing code is:</p>
  
  <pre><code>app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
  
      $routeProvider.when("/", {
          template: "&lt;h1&gt;index&lt;/h1&gt;",
      })
      .when("/Home/About", {
          template: "&lt;h1&gt;about&lt;/h1&gt;",
      })
      .when("/Home/Contact", {
          template: "&lt;h1&gt;contact&lt;/h1&gt;",
      })
      .otherwise({
          template: "&lt;h1&gt;Error&lt;/h1&gt;",
      });
  
  }]);
  </code></pre>
  
  <p>The MVC Home controller has a method for each, and each view has a DIV with ng-view attribute.</p>
  
  <p>When I browse to either about or contact the route is still mapping to Index.</p>
  
  <p>If I change the index path to :</p>
  
  <pre><code>    $routeProvider.when("/Home/Index", {
          template: "&lt;h1&gt;index&lt;/h1&gt;",
      })
  </code></pre>
  
  <p>then Otherwise kicks in and I see <h1>Error</h1>.</p>
  
  <p>The code looks identical to other angular code I've used, and examples on the web. Any suggestions?</p>
  
  <hr>
  
  <p>Updated: Thanks to the answers below. I think I didn't explain my problem well last night, the result of a long day. My problem is that I'm trying to have a mini-spa on a sub page of the site, so the route for the main page would be:</p>
  
  <pre><code>    .when("/userPermissions/index", {
          templateUrl: "/scripts/bookApp/userPermissions/main.html",
          controller: "userPermissionController",
      })
  </code></pre>
  
  <p>And the path of "/userPermissions/index" which would be the page provided by the server isn't being matched by the routing. </p>