$scope.$watch issue in ng-1.1.x

HTML

<div ng-controller="CtrlA">
     <h1>Things in CtrlA:</h1>

    <ul>
        <li ng-repeat="thing in things">{{thing}}</li>
    </ul>
</div>
<div ng-controller="CtrlB">
     <h1>Things in CtrlB:</h1>

    <ul>
        <li ng-repeat="thing in things">{{thing}}</li>
    </ul>
</div>

JavaScript

(function () {
    angular.module('testApp', [])
        .factory('TestService', function ($http) {
        var service = {
            things: [],
            setThings: function (newThings) {
                service.things.length = 0; // empties the array
                newThings.forEach(function(thing) { 
                    service.things.push(thing);
                });                
            }
        };
        return service;
    })
        .controller('CtrlA', function ($scope, $timeout, TestService) {
        $scope.things = TestService.things;
            $scope.$watch('things.length', function (n, o) {
            if (n !== o) {                
                alert('Things have changed in CtrlA');
            }
        });
        $timeout(function () {
            TestService.setThings(['a', 'b', 'c']);
        }, 2000);
    })
        .controller('CtrlB', function ($scope, TestService) {
        $scope.things = TestService.things;
        $scope.$watch('things.length', function (n, o) {
            if (n !== o) {                
                alert('Things have changed in CtrlB');
            }
        });
    })
})();