Angular Ui.router $state template ng-models are $rootScope

Question

I'm getting a very weird issue where the ui-view template of my $state controller is interacting with the $rootScope, rather than $scope.

BUT it will injest $scope variables at init time.

for example: if I have $scope.name = "test"

and in my template

<input ng-model="name">

the input will successfully have "test" inserted fine.

however, when I have a $scope.$watch("name") it does not fire, instead only $rootScope watch on "name" will fire... Did I wire my routes incorrectly?

I have a main "app" that gets its main dependency (my component):

angular.module('p1poc', ['ngAnimate', 'ngMaterial', 'ngWebSocket' ... 'myModule');

The module in question 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 in, as well as the template

my template as for example html elements like such:

  <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>

But as I described above, the ng-model updates $rootScope.orderBy rather than $scope.orderBy.

but at init time, it is successfully getting data from $scope.orderBy...just not bound 2 ways

Answer 1

try assigning an empty value for the $scope.name before you are going to use it in HTML