Angularjs routing - angularjs

Question

I am learning Angularjs and having problem with routing. I write up a very simple slim demo example which uses out of the box MVC5. The home page display fine but when I click on the About link it doesn't show the About page and AboutController break point is not hit. And got the following error in Console
Error: [$compile:tpload] Failed to load template: templates/indexView.html (HTTP status: 404 Not Found).
If I swap the two route, then my About page is displayed but got the error when clicking Home link so I am sure the html can be loaded. What do I need to do in order to get the routing to work?
Below is the index.cshtml
#{
ViewBag.Title = "Home Page";
ViewBag.InitModule = "homeIndex";
}
#section Scripts {
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/js/home-index.js"></script>
}
<div data-ng-view=""></div>
Below is the About.cshtml
#{
ViewBag.Title = "About Page";
ViewBag.InitModule = "homeIndex";
}
#section Scripts {
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/js/home-index.js"></script>
}
<div data-ng-view=""></div>
below is the home-index.js
// home-index.js
var module = angular.module("homeIndex", ["ngRoute"]);
var angularFormsApp = angular.module('homeIndex', ["ngRoute"]);
angularFormsApp.config(["$routeProvider",
function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "templates/indexView.html",
controller: "HomeController"
})
.when("/About", {
templateUrl: "templates/aboutView.html",
controller: "AboutController"
});
}]);
angularFormsApp.controller("HomeController",
["$scope",
function ($scope) {
var x = 1;
}]);
angularFormsApp.controller("AboutController",
["$scope",
function ($scope) {
var x = 1;
}]);
The var x=1 has no meaning just for me to set a break point.
Below is indexView.html
<h3>Arrived at Index Page</h3>
aboutView.html
<h3>About Page</h3>
I also have the below in the _Layout.cshtml html tag to hook in angular
data-ng-app="#ViewBag.InitModule"

Answer 1

The problem seems to be that MVC is handling the routing that you expect to be handled by Angular.
Have a look at this question for some more information about having Both AngularJS and MVC in the same project:
Should I be using both AngularJS and ASP.NET MVC?
Here is a nice guide to getting started using the two together, it specifically touches on the routing as well:
Getting started with AngularJS and ASP.NET MVC
I hope that helps, please let us know if you need more information, or if something is not clear.