Here's my current approach with the select element. I am not utilizing the ng-options feature due to the need for disabling options and operating on angular 1.3.x where the 'disable by' feature is apparently in version 1.4.
<select class="checkout"
ng-model="user.deliveryTime"
ng-change="timeUpdate = true"
ng-class="{'selected': user.deliveryTime}" >
<option value="" disabled selected>Delivery Slot </option>
<option ng-repeat="deliveryTime in intervals"
ng-disabled="deliveryTime.tooLate" value="{{deliveryTime.time}}">
{{deliveryTime.time}}
</option>
</select>
This code snippet explains how to preselect a specific value within the select element:
config.deliveryTimes(function(m){
$scope.intervals = m;
$scope.user.deliveryTime = $scope.intervals[2].time;
});
The config.deliveryTimes(callback) function essentially initiates an HTTP request and handles the response accordingly.
Despite setting the option to the third value of the array explicitly, the first option always gets selected. Even hard-coding the options within the controller doesn't resolve this issue.
Any suggestions or guidance would be greatly appreciated!