I need assistance with selecting a dropdown value in AngularJS and saving it in a service to be used on another view for displaying the user's selected value along with the full dropdown. However, I am encountering an issue where the selected value is showing as undefined when I try to log it inside the controller. Any guidance on how to proceed would be greatly appreciated.
<td>
<select name="systems" class="pulldown1" id="systems" ng-model="system.selectedOption" ng-controller="EurexController" required ng-options="option.name for option in system.availableOptions track by option.id" ng-init="system.selectedOption=system.availableOptions[0]" ng-change="changed()"> </select>
</td>
Controller code:
$scope.system = {
availableOptions: [{
id: 'Domestic 1',
name: 'Domestic 1'
}, {
id: 'Domestic 2',
name: 'Domestic 2'
}, {
id: 'Global',
name: 'Global'
}, {
id: 'Far East',
name: 'Far East'
}],
// selectedOption: {id: 'Domestic 1', name: 'Domestic 1'} //This sets the default value of the select in the ui
};
I have also attempted using the selectedOption method recommended on the AngularJS website but without success.
console.log($scope.system.selectedOption);
console.log(systems);