AngularJS: routing not working to load html files into NG-View from asp.net mvc project

I am basically winform developer using VS2013 IDE. now i am trying to learn angularjs. i am using angularjs from asp.net mvc5 project template.

see what i have done.

1. i add angularjs reference in layout page at bottom like this way

<script src="@Url.Content("~/Scripts/angular.min.js")"></script>
<script src="@Url.Content("~/Scripts/angular-route.min.js")"></script>
<script src="@Url.Content("~/Scripts/Script.js")"></script>

2. i create a script.js file and put in script folder.

my script.js file code looks like.

/// <reference path="_references.js" />
var app = angular.module("DemoApp", ["ngRoute"])
                .config(function ($routeProvider) {
                    $routeProvider
                    .when("/home",
                    {
                        templateUrl: "Template/Home.html",
                        controller: "homeController"
                    })
                    .when("/course",
                    {
                        templateUrl: "Template/Course.html",
                        controller: "courseController"
                    })
                    .when("/student",
                    {
                        templateUrl: "Template/Student.html",
                        controller: "studentController"
                    })
                })
                .controller("homeController", function($scope)
                {
                    $scope.Message = "Home Page!!";
                })
                .controller("courseController", function ($scope) {
                    $scope.Courses = ["C#", "VB.Net", "SQL", "RDBMS"];
                })
                .controller("studentController", function ($scope) {
                    $scope.Students = ["John", "Sam", "Mac", "Jeff"];
                })

home.html file content looks like

<h1>Home Page</h1>
{{Message}}

Course.html file content looks like

<h2>List of Courses</h2>
<ul>
    <li ng-repeat="course in Courses">
        {{course}}
    </li>
</ul>

Students.html file content looks like

<h2>List of Students</h2>
<ul>
    <li ng-repeat="student in Students">
        {{student}}
    </li>
</ul>

So when i run the page then index.cshtml load first and this page has nothing. my layout page looks like

<!DOCTYPE html>
<html lang="en">
<head >
    <title>CSS Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @Styles.Render("~/Content/sample.css")

</head>
<body ng-app="DemoApp">
    <header>
        <h2>Header</h2>
    </header>
    <section>
        <nav>
            <ul>
                <li><a href="/#/home">Home</a></li>
                <li><a href="/#/course">Course</a></li>
                <li><a href="/#/students">Students</a></li>
            </ul>
        </nav>
        <div>
            @RenderBody()
            <ng-view></ng-view>

        </div>
        <div id="footer">
            <p>Footer</p>
        </div>
    </section>

    @RenderSection("scripts", required: false)
    <script src="@Url.Content("~/Scripts/angular.min.js")"></script>
    <script src="@Url.Content("~/Scripts/angular-route.min.js")"></script>
    <script src="@Url.Content("~/Scripts/Script.js")"></script>
</body>
</html>

when i run the application then index page load and screen shot look like

left side showing few links like

1. a) Home b) Course c) Students

and i want when user click on those links then those page will be loaded into

when i click course links then url becomes in address bar like http://localhost:53614/#!#%2Fcourse and course page content do not load.

so please tell me what mistake i have made. guide me what to change in project or in code to load course & student html file content.

Thanks