I'm encountering a strange issue where the ui-view template in my $state controller seems to be interacting with $rootScope instead of $scope.
However, it does initialize $scope variables properly.
For instance: if I have $scope.name = "test"
and in my template
<input ng-model="name">
the input will display "test" correctly.
But when I use $scope.$watch("name"), it doesn't trigger. Instead, only $rootScope watch on "name" gets triggered... Did I set up my routes incorrectly?
I have an main "app" that has its main dependency (my component):
angular.module('p1poc', ['ngAnimate', 'ngMaterial', 'ngWebSocket' ... 'myModule');
The module causing the issue is "myModule":
angular.module('myModule', ['ui.router', 'infinite-scroll', 'pasvaz.bindonce'])
.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('search', {
url: '/search?query',
controller: 'MainCtrl',
templateUrl: 'main/main.html',
label: 'Search',
access: {free: true}
});
}])
As you can see, I am injecting the controller and template into it.
My template contains HTML elements like this:
<md-select placeholder="Sort By" ng-model="orderBy">
<md-option value="_score" checked>Relevance</md-option>
<md-option value="citingsrcscount">Cited Count</md-option>
<md-option value="sortdate">Publication Date</md-option>
</md-select>
However, as mentioned earlier, the ng-model updates $rootScope.orderBy instead of $scope.orderBy.
But during initialization, it successfully retrieves data from $scope.orderBy...just not binding two ways