HTML select doesnt bind to controller when nested in ion-content

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

Egghead video

if it doesn't work, please provide a plunker to debug