Having trouble displaying a default option in a select tag after retrieving a list of options from the server. The model is being set correctly, but the select shows up blank, and I can't figure out why!
I've attempted various solutions from Stack Overflow, such as here, here, and here.
Here's a snippet of the code:
<select ng-options="option as option.Name for option in options track by option.ID" ng-model="selected">
In the controller:
DataService.getOptionsFromServer().then(function (result) {
$scope.options = result.data;
$scope.selected = $scope.options[0];
}, function (err) {
console.error(err);
});
Even though the console logs show that the selected option is set correctly, the select remains empty. Any ideas?
Update1: It appears there may be compatibility issues between Angular and jQuery Mobile (which I didn't add to the project). Any insights on this?
Update2: Removing jquery.mobile.min.js resolves the issue, but unfortunately, it's needed for the project.
Update3: The problem lies in the fact that jQuery Mobile generates a span to display the selected value. This prevents proper binding as the select is bound, not the span. Having trouble finding a solution as the span is generated at runtime by JQM.
Updated4: Issue resolved! See solution below for future reference.