A component of an application that generates a list of popular phone and tablet models based on the selection of a mobile operating system is displayed below:
<div class="input-field col s3">
<label class="active">Environment (OS)</label>
<select ng-model="environment" ng-change="listBrowsers()">
<option value="" disabled>Select an OS</option>
<option ng-repeat="OS in OSes">{{OS}}</option>
</select>
</div>
Here is an excerpt from the $scope.listBrowsers() function in the controller for context....
$scope.listBrowsers = function() {
$scope.browsers = MachineDataService.getBrowsers($scope.environment);
$scope.browser1 = null;
$scope.notMobile(); //calls another function to determine mobile-ness
$scope.getMobileDevices($scope.environment);
return $scope.browsers;
}
Afterwards, the 'getMobileDevices' scope function invokes a corresponding service method:
this.getMobileDevices = function(envt) {
var deviceList = [];
for (i=0; i < _devices.length; i++) {
if (_devices[i].versions.indexOf(envt) > -1) {
deviceList.push(_devices[i].name);
}
}
return deviceList;
}
However, a problem arises when making changes to the view:
This approach works --
<div class="input-field col s6">
<label class="active">Phone/Tablet Model:</label>
<p ng-repeat="device in mobileDevices">{{device}}</p></div>
This approach doesn't:
<div class="input-field col s6><select ng-model="mobileDeviceType">
<option value="" disabled selected>Choose a device...</option>
<option ng-repeat="device in mobileDevices" value="{{device}}">{{device}}</option>
</select></div>
Interestingly, even substituting the select with radio buttons worked as expected!
Disclaimer: It's possible I may be overlooking something -- Angular is still relatively new to me. Apologies for not utilizing Angular Material initially; I plan to switch over later.
Edit -- To further illustrate the issue, here are screenshots showcasing the result with the paragraph using the repeater, versus the select element implementing ng-options.