scope.$watch within a controller not firing - angularjs

Question

I am using controllerAs syntax like so:
.state('operators', {
url: '/operators',
templateUrl: 'app/features/operators/operators.html',
controller: 'OperatorsController',
controllerAs: 'vm'
})
And have a variable in my controller vm.selectedOperators which I want to watch for changes on:
var vm = this;
vm.selectedOperators = [];
$scope.$watch(function() {
return vm.selectedOperators;
}, function(current) {
console.log(current.length);
});
In the view, an expression is used to show the count of items in the variable.
{{vm.selectedOperators.length}} item selected
This variable gets updated from elsewhere (Its being used by a multi-select table directive I have written which is used on the same view) and I see this expression updating fine in the view.
The problem is my watcher in the controller doesn't fire after the variable gets initialised, and I am not sure why.
Can anyone offer any help?
Thanks
UPDATE
I should have mentioned, I have already tried using the expression equivalent like so:
$scope.$watch('vm.selectedOperators', function (current){
console.log(current);
});
But this still does not fire for me

Answer 1

Concept: There is an optional third argument to the $watch function - objectEquality
$watch(watchExpression, listener, [objectEquality]);
You must set it to true when you are trying to watch an object otherwise angular will only match the reference of both the objects. By setting it true angular compares the old object and new using angular.equals
Read more about it here:
https://docs.angularjs.org/api/ng/type/$rootScope.Scope
$scope.$watch(function() {
return vm.selectedOperators;
}, function(current) {
console.log(current.length);
}, true);
Update
As #Martijn Welker pointed out in the comment below, $watchCollection can be useful if only single level equality has to be matched instead of complete object tree.
$scope.$watchCollection(function() {
return vm.selectedOperators;
}, function(current) {
console.log(current.length);
});

Answer 2

Try this (ES6 syntax):
$scope.$watch('vm.selectedOperators', (new, old) => {
console.log('new:', new, 'old:', old);
});
You should be able to see the changes.

Answer 3

Try using Deep Watch Array object..
Deep watch will watch each object in array list. It's little bit expensive in process than normal watch So use if normal watch doesn't work:-
Here is code
$scope.$watch('vm.selectedOperators', function (current) {
console.log(current.length);
},true);