<!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>
    <script src="StudentFactory.js"></script>
    <script src="EnrollmentFactory.js"></script>
       </body>
</html>

/* Styles go here */

<h2>Student   (using Factory)  </h2>
<ul ng-repeat="student in Students">
  <li>{{student.Name}} - {{student.City}}
    <a href="#/Enrollment/{{ student.StudentId }}/{{student.Name}}">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/:Name', {
      controller: 'EnrollmentController',
      templateUrl: 'Enrollment.html'
    })
    .otherwise({
      redirectTo: '/'
    });
});
var StudentController = function($scope, StudentFactory) {
  $scope.Students = StudentFactory.GetStudents();
};

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

  var factory = {};
  factory.GetStudents = function() {
    return Students;
  };

  return factory;
};

angular.module('StudentApp').factory('StudentFactory', StudentFactory);
var EnrollmentFactory = function() {

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

  var factory = {};
  
  factory.GetEnrollmentByStudentId = function(StudentId) {
    for (var i = 0, len = Enrollments.length; i < len; i++) {
      if (Enrollments[i].StudentId === parseInt(StudentId)) {
        return Enrollments[i];
      }
    }
   return {};
  };
  
  return factory;
};

angular.module('StudentApp').factory('EnrollmentFactory', EnrollmentFactory);