Encountering an issue with a select menu and its model. In this scenario, usaStates represents an object array saved in the root scope.
<label>State:</label>
<select name="state" ng-model="selectedState" ng-options="state.name for state in usaStates" required ng-change="getCities()">
<option>Select a state</option>
</select>
Within my controller:
$scope.selectedState = null;
$scope.getCities = function()
{
console.log($scope.selectedState);
var stateCode = $scope.selectedState.id;
MainService.getCities(stateCode)
.then(function(httpData){
$scope.cities = httpData.data;
})
.catch(function(error){
console.log(error);
});
};
Upon selecting a state, the getCities function is triggered, however $scope.selectedState remains null. This code functions correctly in other views. Any suggestions as to why it might not be working here?
UPDATE The source of my states is:
[{id: "AL", name: "Alabama"}, {id: "AK", name: "Alaska"}, {id: "AZ", name: "Arizona"},…]