<!DOCTYPE html>
<html ng-app="StudentApp">

  <head>
    <link rel="stylesheet" href="style.css">
    </head>

  <body>
    <div ng-view></div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js"></script>
    <script src="https://code.angularjs.org/1.2.28/angular-route.js"></script>
    <script src="app.js"></script>
    <script src="StudentController.js"></script>
    <script src="EnrollmentController.js"></script>
       </body>
</html>

/* Styles go here */

<h2>Student</h2>
<ul ng-repeat="student in Students">
  <li>{{student.Name}} - {{student.City}}
   <a href="#/Enrollment/{{ student.StudentId }}">View Enrollment</a>
   </li>
</ul>

var app = angular.module('StudentApp', ['ngRoute']);
    
    app.config(function($routeProvider) {
        $routeProvider
            .when('/', {
                controller: 'StudentController',
                templateUrl: 'Student.html'
            })
            .when('/Enrollment/:StudentId', {
                controller: 'EnrollmentController',
                templateUrl: 'Enrollment.html'
            })
           .otherwise( { redirectTo: '/' } );
               });

var StudentController = function ($scope){
  $scope.Students = [
    {StudentId: 1, Name: 'Eric Guthmann', City: 'Omaha'},
    {StudentId: 2, Name: 'Taylor Clark', City: 'Chicago'},
    {StudentId: 3, Name: 'Mike Friedman', City: 'Des Moines'}
    ];
}
  
angular.module('StudentApp').controller('StudentController',StudentController);
<h2>Enrollment</h2>
<table>
  <tr>
    <th>Class</th>
    <th>Fee</th>
  </tr>
  <tr>
    <td>{{ Class }}</td>
    <td>{{ Fee | currency }}</td>
  </tr>
</table>
var EnrollmentController = function($scope, $routeParams) {
  var StudentId = $routeParams.StudentId;

  $scope.Class = null;
  $scope.Fee = null;

  function GetEnrollmentByStudentId() {
    for (var i = 0, len = $scope.Enrollments.length; i < len; i++) {
      if ($scope.Enrollments[i].StudentId === parseInt(StudentId)) {
        $scope.Class = $scope.Enrollments[i].Class;
        $scope.Fee = $scope.Enrollments[i].Fee;
        break;
      }
    }
  }

  $scope.Enrollments = [{
    StudentId: 1,
    Class: 'CSharp',
    Fee: 500
  }, {
    StudentId: 2,
    Class: 'Angular',
    Fee: 700
  }, {
    StudentId: 3,
    Class: 'SQL Server',
    Fee: 850
  }];

  GetEnrollmentByStudentId();
};
angular.module('StudentApp').controller('EnrollmentController', EnrollmentController);