My application features a form where users can fill out their starting point and choose from 350 possible destinations to get directions using Google Maps. Users can select their destination by either clicking on a pin on the map or choosing from a drop-down menu in the form.
Ideally, when a user clicks on a pin on the map, I want the selection in the drop-down menu to change to reflect their chosen destination.
I've attempted to use ng-selected for this functionality, but so far it hasn't been successful.
Any assistance with solving this issue would be greatly appreciated. Thank you.
View
<div id="select_destination">
<select data-ng-model="selectedDestination"
ng-options="station.stationID as station.stationShortAddress for station in allStationsMapData track by station.stationID"
data-ng-change="selectDestination(selectedDestination)"
ng-selected="station.stationID == selectedDestination">
</select>
</div>
Controller
A function called getDirections is triggered when a user clicks on a station on the map (instead of selecting from the drop-down menu). This function is intended to update the currently selected item in the drop-down menu, but it's not working as expected. (Note: The function is correctly passing in the stationID.)
$scope.getDirections = function(stationLat, stationLng, stationID){
//update the select menu model to the chosen stationID.
$scope.selectedDestination = stationID;
};
Extra info:
I also attempted using ng-selected within ng-repeat, but that approach did not yield the desired result either.
<select data-ng-model="selectedDestination" data-ng-change="selectDestination(selectedDestination)">
<option ng-repeat="stationMapData in allStationsMapData"
value="{{stationMapData.stationID}}"
ng-selected="{{stationMapData.stationID == selectedDestination}}">
{{stationMapData.stationShortAddress}}
</option>
</select>