Routing with angularjs in Mvc application

I have been continously trying to implement routing in Angularjs with Mvc 4.0 project but I am not able to do it. I have created a empty MVC 4.0 project and added a controller "HomeController". Then I added a folder in Views with name Home having three views. One is index which opens when we run application as in route config we have route for homecontroller and Index Action.So, basically assuming the index page as the main page in Singlepage application, I have defined some code in the index page as given in 6oish book enter link description here.

Index. CShtml

@{
    ViewBag.Title = "Index";
}
<style>
    .container {
        float: left;
        width: 100%;
    }
</style>
<script src="~/Scripts/angular.min.js"></script>

<h2>Practising Angular</h2>

    <a href="#/">List</a>
<a href="#/Edit">Edit</a>
<div ng-app="demoApp">
    <div class="container">
        <div ng-view=""></div>
    </div>
</div>


<script>
    var demoApp = angular.module('demoApp', []);

    demoApp.config(function ($routeProvider) {
        $routeProvider.when('/', { controller: 'SimpleController', templateUrl: 'Home/List' })
                      .when('/Edit', { controller: 'SimpleController', templateUrl: 'Home/Edit' })
                      .otherwise({ redirectTo: '/' });
    });

    demoApp.controller('SimpleController', function ($scope) {
        $scope.customers = [{ name: 'Dave jones', city: 'Phoenix' },
                            { name: 'Jhon Dena', city: 'Mexico' },
                            { name: 'Bradshaw', city: 'WashingTon' },
                            { name: 'Rey Mysterio', city: 'Brazil' },
                            { name: 'Randy', city: 'California' }, ];
    });

    $scope.addCustomer = function () {
        $scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city })
    };
</script>

Now, I need two more Views which are defined in the above route and they are as follows:

List.cshtml

@{
    ViewBag.Title = "List";
}

<h2>Listing the users in order </h2>

<div class="container">
    Name:&nbsp;<input type="text" ng-model="filter.name" />
    <ul>
        <li ng-repeat="objCust in customers | filter:filter.name">{{objCust.name }}-{{objCust.city}}
        </li>
    </ul>
    Customer Name:<br />
    <input type="text" ng-model="newCustomer.name" /><br />
    Customer city:<br />
    <input type="text" ng-model="newCustomer.city" /><br />
    <button ng-click="addcustomer()">Add customer</button>
</div>

and Last one is

Edit.cshtml

@{
    ViewBag.Title = "Edit";
}

<h2>Edit  the particular user. Things are under construction</h2>


<h2>Listing the users in order </h2>

<div class="container">
    Name:&nbsp;<input type="text" ng-model="city" />
    <ul>
        <li ng-repeat="objCust in customers | filter:city">{{objCust.name }}-{{objCust.city}}
        </li>
    </ul>

</div>

Here is the home controller

namespace Routing_Angular.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult List()
        {
            return PartialView();
        }
        public ActionResult Edit()
        {
            return PartialView();
        }
    }
}

I am attaching a image to show the Project structure.

I ma running the application, I can see the empty page where it is written "Practising Angular" with two anchor tags "List" and "Edit". I am not getting any change on changing the url.I added "/" in the url and It is not changed . then I added a "/Edit". then also I found no change. I have added anchor tags at the top in index page then also there is no change. only url gets changed. Please guide me where I am doing wrong.