$watchCollection on an array of js objects in an Angular Controller requires an anonymous function?

Question

I have a simple js array being retrieved by an angular factory, injected into a control, watched, then displayed in a table using ng-repeat from within a view state managed by ui-router.

Initially I attempted to subscribe to this array using $watchCollection...

self.$watchCollection( self.Data, function(newData, oldData){
  self.total = newData.length;
});

However this was only running when I initially load the app. I found that the only way to subscribe to the running collection was to use an anonymous function returning the array in question.

self.$watchCollection( function() { return self.Data }, function(newData, oldData){
  self.totalWatchedWithAnonFunc = newData.length;
})

View this all in http://plnkr.co/edit/L7mycl

From everything I read, all I should have needed to do for a valid subscription was to pass in the array itself and not an anonymous function that returns the array.

The reason I included ui-router is because my actual application is using it heavily and I wanted to mock up my environment as closely as possible to how I've got things set up.

What am I not understanding? Could I be doing something differently?

Thanks.

Answer 1

Are you looking for self.$watchCollection("Data", ...) instead of self.$watchCollection(self.Data, ...)? Try it out! See the docs to see why: the first argument is a string evaluated on the scope, or a function taking a scope that returns something you want to watch.