title: Angularjs watch service object
body: <p>Why can't I watch a object in a service.
  Ive got a simple variable working, but a object wont work.
  <a href="http://plnkr.co/edit/S4b2g3baS7dwQt3t8XEK?p=preview" rel="noreferrer">http://plnkr.co/edit/S4b2g3baS7dwQt3t8XEK?p=preview</a></p>
  
  <pre><code>var app = angular.module('plunker', []);
  
  app.service('test', ['$http', '$rootScope',
              function ($http,   $rootScope) {
  
    var data = 0;
    var obj  = {
                  "data": 0
                };
  
    this.add = function(){
      obj.data += 1;
      console.log('data:', obj);
    };
  
    this.getData     = function() { return obj; };
  
  }]);
  
  app.controller('TestController', ['$scope', '$rootScope', '$filter', 'test',
                            function($scope,   $rootScope,   $filter,   test) {
  
    //test controller
    $scope.add = function(){
      test.add();
    };
    $scope.test = test;
    $scope.$watch('test.getData()', function(newVal){
      console.log('data changes into: ', newVal)
    });
  }]);
  </code></pre>