<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="angularVolunteerApp">
<h1>Hello Plunker!</h1>
<div ng-controller="vAppController">
<select name="studentList" ng-model="student" ng-change="getStudent(student)" ng-options="s.StudentID as s.FirstName for s in cStudents | orderBy:'FirstName'">
<option value="">Choose Students...</option>
</select>
<label>{{cSchoolName}}</label>
</div>
<script>
var xStudents = [{"SchoolID":132,"SchoolName":"TEST SCHOOL","StudentID":32,"StudentInSchoolID":0,"ExternalStudentID":0,"FirstName":"JANE","MiddleName":"","LastName":"TESTCASE","CurrentStatus":null,"GradeLevelID":"1","GradeLevelName":"FIRST","GradeLevelDescription":"TEST DESCRIPTION","SchoolStartDate":"\/DATE(-62135578800000)\/"}]
</script>
</body>
</html>
// Code goes here
var angularVolunteerApp = angular.module('angularVolunteerApp', []);
angularVolunteerApp.controller('vAppController',
function vAppController($scope, $window) {
$scope.cStudents = xStudents;
$scope.getStudent = function(xStudent) {
angular.forEach(xStudents, function (s) {
if (s.StudentID == xStudent) {
$scope.cSchoolName = s.SchoolName;
$scope.Student = xStudent;
}
});
};
});
/* Styles go here */