Attempting to populate options with specific values instead of undefined, but encountering a delay in retrieving the values after the select box has finished loading.
https://i.stack.imgur.com/SpEFP.jpg
To illustrate, here is the HTML code snippet:
<label for="to">Destination:
<select id="to" name="to" ng-model="toSelected" data-ng-options="stop.stop_id as stop.name for stop in stops">
<option value="">Choose a Destination</option>
</select>
</label>
The AngularJS Factory implementation looks like this:
.factory('DataFactory', ['$http', function ($http) {
// Using a resource that returns a JSON array
return {
getAllStops: function () {
return $http({
method: 'GET',
url: 'https://myAPIURL.com/api',
headers: {
"Accept": "application/json",
"X-Mashape-Key": "KEYKEYKEYKEYKEYKEYKEYKEYKEYKEYKEY"
}
}).then(function (res) {
return res;
})
},
getAllRoutes: function () {
// Returns some results similar to the above function;
// other functions.
}
Finally, the AngularJS Controller logic is implemented as follows:
.controller('MainCtrl', ['$scope', '$http', '_', 'DataFactory', function ($scope, $http, _, DataFactory) {
$scope.fromSelected = "";
$scope.toSelected = "";
DataFactory.getAllStops().then(function successCallback(res) {
console.log(res);
$scope.stops = res.data;
}, function errorCallback(err) {
console.log("error: ");
console.log(err);
});
$scope.changed = function (location, destination) {
console.log($scope.stops);
$scope.possibleRoutes = DataFactory.getPossibleRoutes(location, destination);