AngularJS $routeProvider not displaying html page in <div ng-view>
<p>I am new to AngularJS and need some help to solve an issue routing to another html page while passing a parameter. My application has a form with input fields (name &amp; course). That information the user inputs will display in a table that is hidden unless it has data to display. </p>

<p>The issue is when clicking on the Display Info link, I am not being routed to the DisplayInfo.html page. </p>

<p>Here is the code: <a href="http://plnkr.co/edit/6WpZYkKMy0B4Vl8Phtnw?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/6WpZYkKMy0B4Vl8Phtnw?p=preview</a></p>

<p><strong>app.js file</strong></p>

<pre><code>var app = angular.module('student', []);

app.controller('StudentController', function($scope) {
    $scope.studentList = [];

    $scope.addStudent = function() {
    this.studentList.push({
    name: $scope.getName,
    course: $scope.getCourse,
    date: new Date()
  });

    $scope.getName = "";
    $scope.getCourse = "";
 };


    app.config(['$routeProvider',
        function($routeProvider) {
        $routeProvider.
       when('/DisplayInfo/:name', {
       templateUrl: 'DisplayInfo.html',
       controller: 'DisplayInfoController'
   });
 }
]);


app.controller('DisplayInfoController', function($scope, $routeParams) {


$scope.name = $routeParams.getName;

  });

});
</code></pre>

<p><strong>Index.html</strong></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html ng-app="student"&gt;


&lt;head&gt;

    &lt;link rel="stylesheet" type="text/css" href="student.css"&gt;

    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;

    &lt;!-- jQuery library --&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;

    &lt;!-- Latest compiled JavaScript --&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;


&lt;/head&gt;

&lt;body&gt;

    &lt;div class="container"&gt;
        &lt;div id="header"&gt;
            &lt;h1&gt;Student Access&lt;/h1&gt;
            &lt;p&gt;

            &lt;fieldset&gt;


                &lt;br /&gt;
                &lt;br /&gt;

                &lt;form ng-controller="StudentController as studentCtrl" ng-submit="addStudent()"&gt;

                    &lt;div ng-if="studentList.length &gt; 0"&gt;
                        &lt;table class="table table-striped"&gt;

                            &lt;tr&gt;
                                &lt;th&gt;
                                    Name
                                &lt;/th&gt;
                                &lt;th&gt;
                                    Course
                                &lt;/th&gt;
                                &lt;th&gt;
                                    Date
                                &lt;/th&gt;
                            &lt;/tr&gt;

                            &lt;tr ng-repeat="getStudent in studentList track by $index"&gt;

                                &lt;td ng-bind="getStudent.name"&gt;

                                &lt;/td&gt;
                                &lt;td  ng-bind="getStudent.course"&gt;

                                &lt;/td&gt;
                                &lt;td  ng-bind="getStudent.date | date:'MM-dd-yyyy'"&gt;

                                &lt;/td&gt;
                                &lt;td&gt;&lt;a href="#DisplayInfo/{{getStudent.name}}"&gt;Display Info&lt;/a&gt;&lt;/td&gt;

                            &lt;/tr&gt;
                        &lt;/table&gt;

                    &lt;/div&gt;
                    &lt;div ng-view&gt;&lt;/div&gt;                       
                     &lt;br /&gt;
                    &lt;fieldset class="form-group"&gt;
                        &lt;legend&gt;&lt;strong&gt;First Name&lt;/strong&gt;&lt;/legend&gt;
                        &lt;input ng-model="getName" type="text" class="form-control" title="Name" placeholder="Enter Student Name" /&gt;
                    &lt;/fieldset&gt;

                    &lt;fieldset class="form-group"&gt;
                          &lt;legend&gt;&lt;strong&gt;Course&lt;/strong&gt;&lt;/legend&gt;
                        &lt;input ng-model="getCourse" type="text" class="form-control" title="Course" placeholder="Enter Course" /&gt;
                    &lt;/fieldset&gt;

                        &lt;input type="submit" class="btn btn-primary pull-right" value="Add Info" /&gt;

                &lt;/form&gt;

            &lt;/fieldset&gt;


        &lt;/div&gt;
    &lt;/div&gt;
        &lt;!-- AngularJS Library --&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"&gt;      &lt;/script&gt;

&lt;script src="app.js"&gt;&lt;/script&gt;
&lt;/body&gt;
</code></pre>

<p></p>

<p><strong>DisplayInfo.html</strong></p>

<pre><code>Name: {{getStudent.name}}
Here are the details for todo item: #{{getStudent}.
</code></pre>