In my AngularJS application, I have a requirement to display courses and their equivalent courses in a table. The table should dynamically update based on the selection made from a drop-down menu.
HTML
<form name = "Select University" ng-show = "courseType == 'extern'">
<label for = "University"> University: </label>
<select name = "University" id = "repeatSelect" ng-change = "changeIt()"ng-model = "univs.repeatSelect">
<option ng-repeat = "univ in univs.uniNames | orderBy: 'School'" > {{univ.School}} </option>
</select>
</form>
Courses at {{univs.repeatSelect}}
<table>
<tr>
<th> Course </th>
<th> Equivelance </th>
</tr>
<tr ng-repeat="x in names | orderBy: 'className' | filter:univs.repeatSelect">
<td>{{ x.className }}</td>
<td> {{x.equiv}} </td>
</tr>
</table>
JavaScript
$http.get("http://linux.students.engr.scu.edu/~cmulloy/COEN174/getSchools.php")
.success(function (response)
{
$scope.univs.uniNames = response.records;
});
$scope.univs =
{
repeatSelect: null,
uniNames: null,
};
The scope variable {{univs.repeatSelect}} is displaying correctly on the page. However, when I use it as the filter argument in ng-repeat, the table remains empty. When I manually input 'UCLA' as the filter argument, it works fine. Am I overlooking something here?