<!DOCTYPE html>
<html lang="en">
<head>
<title>Angular Tutorial</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body style="white-space: normal;">
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in terms">
<td>{{x.discipline}}</td>
<td>{{x.term}}</td>
</tr>
</table>
</div>
<script>
var app=angular.module("myApp", []);
app.controller('myCtrl', function($scope, $http) {
$http.get("http://brucegust.com/adm/term_list_json.php")
.then(function (response) {$scope.terms = response.data.records});
});
</script>
<p>With the "ng-options" directive, the selected value can be an object...</p>
</body>
</html>