Utilizing Angular's ng-init to populate a rest call function and populate $scope.races before filling up the dropdown.
Initially, everything appears to be working correctly. However, upon selecting an option from the dropdown menu, it immediately clears.
I suspect that somehow $scope.races is being emptied.
This is the Angular controller code snippet:
angular.module('MyApp', [])
.controller('RestController', function($scope, $http) {
$scope.getRaces = function() {
$http.get('http://localhost:8080/races').
success(function(data) {
$scope.races = data;
});
}
});
Here is the HTML markup:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="restController.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-app="MyApp" ng-controller="RestController">
<div class="container-fluid" ng-init="getRaces()">
<select ng-model="races">
<option ng-repeat="race in races" value="{{race.raceId}}">{{race.raceName}}</option>
</select>
</div>
</body>
</html>