I have a small form with a select tag, the form is inside ion-content directive
now while i can see the values on the view using {{selectedValue}} , on the controller they arrive as undefined. I've checked the code and it seems fine. when i removed the ion-content directive it started to work just fine
here is my code (controller is defined in $stateResolver)
<ion-content>
<form>
<select ng-model="selectedCity"
ng-options="city as city.cityName for city in cities"
ng-change="cityChanged()">
</select>
</form>
*ion-content tag is closing i dont know why stack cuts it
and the js snippet
controllers.controller('RegisterController',function($scope,$http,$state){
$scope.formData = {
firstName:'',
lastName:'',
email :'',
password:'',
confirmPassword:'',
phoneNumber:'',
dob:'',
country:{},
selectedItem:''
};
$scope.errors = [];
$scope.countries=[
{countryId:1,countryName:"United States"},
{countryId:2,countryName:"Mexico"}
];
$scope.cities=[
{cityId:1,countryId:1,cityName:'Miami'},
{cityId:2,countryId:1,cityName:'Los Angeles'}
];
$scope.cityChanged = function(){
console.log($scope.selectedCity);
}
$scope.register = function(){
oformData = $scope.formData;
oformData.selectedCity = $scope.selectedCity;
console.log($scope.formData);
}
});
on the console it will show undefined unless the ion-content directive is removed
is this a bug?
It might have something to do with the ion-content directive creating its own isolated scope. Try it again using the dot notation (important when dealing with scope inheritance)
for example, change the ng-model to:
ng-model="form.selectedCity"
Please refer to:
AngularJS documentation on scopes
if it doesn't work, please provide a plunker to debug