$scope.watch doesn't work in ionic framework - angularjs

Question

$scope.watch doesn't work in ionic framework
I was designing some fliter in ionic..It won't work ..the same code is working properly on blank test app as well as angularjs...
My html
<div class="bar bar-header bar-royal">
<div class="h1 title">Hotel search</div>
</div>
<ion-view>
<ion-content>
<h4 style="margin-top:100px;color:#116262;margin-left:10px;font-weight:bold"><i class="icon ion-edit"></i> Request Form</h4>
<div class="list" style="margin-top:15px;">
<label class="item item-input item-select">
<div class="input-label" style="font-weight:bold">
City
</div>
<select ng-model="formData.city">
<option value="Chennai">Chennai</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Goa">Goa</option>
</select>
</label>
<label class="item item-input item-stacked-label">
<span class="input-label" style="font-weight:bold">CheckIn</span>
<input type="date" ng-model="formData.checkIn" value="{{formData.checkIn | date:'yyyy-MM-dd'}}">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label" style="font-weight:bold">checkOut</span>
<input type="date" ng-model="formData.checkOut" value="{{formData.checkOut | date:'yyyy-MM-dd'}}">
</label>
<label class="item item-input item-select">
<div class="input-label" style="font-weight:bold">
Rooms
</div>
<select ng-model="formData.room">
<option value="1" ng-selected="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</label>
<label class="item item-input item-select">
<div class="input-label" style="font-weight:bold">
Adults
</div>
<select ng-model="formData.adult">
<option value="1" ng-selected="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</label>
<div class="row center" style="margin-top:20px;">
<button class="button button-outline button-block button-royal" ng-click="submit(formData)" style="text-align:center;">
Search
</button>
</div>
{{formData}}
<input type="text" ng-model="useStars"/>
{{fooChanges}}
</div>
</ion-content>
</ion-view>
My controller is
.controller('PlaylistsCtrl', function($scope,$state) {
$scope.formData ={};
$scope.formData.checkIn = new Date();
$scope.formData.checkOut= new Date();
$scope.formData.checkOut.setDate($scope.formData.checkOut.getDate() + 1);
$scope.formData.room = 1;
$scope.formData.city = 'Chennai';
$scope.formData.adult = 1;
$scope.useStars = 'balakumaran';
$scope.fooChanges = 1;
$scope.$watch(function () {
return {
useStars : $scope.useStars,
}
},function (value) {
alert('');
},true);
$scope.submit = function(formData){
$state.go('app.search',{formData:formData});
}
})
what's problem on above code ?? ..I tried lot of times..it won't wrk..if have any alternative idea's??

Answer 1

As said in comment the problem was resolved doing the following :
<input type="text" ng-model="$parent.useStars"/>
However the best way to never have this problem : always use an intermdediary object like $scope.data.userStarts. So you won't ever need the $parent trick, this is called dot notation in Angular and is due to limit of javascript inheritance.

Answer 2

In your button you are passing the formData as parameter
<button class="button button-outline button-block button-royal" ng-click="submit(formData)" style="text-align:center;">
Search
</button>
in your controller there is not formData parameter is refereed except in your search button in the same way you should pass the useStars .
.controller('PlaylistsCtrl', function($scope,$state) {
formData ={};
formData.checkIn = new Date();
formData.checkOut= new Date();
formData.checkOut.setDate($scope.formData.checkOut.getDate() + 1);
formData.room = 1;
formData.city = 'Chennai';
formData.adult = 1;
$scope.useStars = 'balakumaran';
$scope.fooChanges = 1;
$scope.$watch(function () {
return {
useStars : $scope.useStars,
$state.go('app.search',{formData:formData});
}
},function (value) {
alert('');
},true);
$scope.submit = function(formData){
$state.go('app.search',{formData:formData});
}
});
Here you don't need $scope before form angularjs itself create a scope variable if some event occurs.
but there is no event is occurring so there is no way for PlaylistCtrl can understand $scope.formData so try to make an event to be appeare or try to understand the $scope.
so that will help for two way databinding