I am seeking assistance and advice on a coding issue I am facing. I am attempting to use two methods in one controller. The first method is to display selected rooms, while the second method is to display selected pax. However, only the first method seems to be working as intended, as the second md-select does not display the array in the second method. Below are snippets of my JavaScript and HTML code:
var app = angular.module('CoreWebApp', ['ngMaterial', 'ngMessages', 'ngAnimate']);
app.controller('SelectedTextController', function($scope) {
$scope.rooms = [1, 2, 3, 4, 5, 6, 7];
$scope.selectedRoom;
$scope.getSelectedText = function() {
if ($scope.selectedRoom !== undefined) {
return $scope.selectedRoom + " Room(s)";
} else {
return "Rooms";
}
};
$scope.paxes = [1, 2, 3, 4, 5];
$scope.selectedPax;
$scope.getSelectedPersons = function() {
if ($scope.selectedPax !== undefined) {
return $scope.selectedPax;
} else {
return "Pax";
}
};
});<div>
<label>Rooms</label>
<div layout-sm="column" layout-align="center end">
<md-select md-no-resize ng-model="selectedRoom" md-selected-text="getSelectedText()">
<md-optgroup label="rooms">
<md-option ng-value="room" ng-repeat="room in rooms">{{room}} Rooms</md-option>
</md-optgroup>
</md-select>
</div>
</div>
<div>
<label>Pax</label>
<div>
<md-select ng-model="selectedPax" md-selected-text="getSelectedPersons()" aria-label="">
<md-optgroup label="pax">
<md-option ng-value="pax" ng-repeat="pax in paxes">{{pax}}</md-option>
</md-optgroup>
</md-select>
</div>
</div>