title: AngularJS watching service variables
body: <p>Ok, I'm really struggling with this one. I looked everywhere I could for a solution but didn't find it even though there are quite a few similar questions.</p>
  
  <p>I have a class. I need only one instance, so I made service for it:</p>
  
  <pre><code>services.factory('PlayerService', -&gt;
       new Player()
  )
  </code></pre>
  
  <p>As you can see it is some kind of player. <strong>I need my view to update when the song changes</strong>.</p>
  
  <p><strong>Here is an extremely simplified demo plnk that exposes the problem: <a href="http://plnkr.co/edit/L3WndT" rel="nofollow noreferrer">http://plnkr.co/edit/L3WndT</a></strong></p>
  
  <p>And here is what I tried based on <a href="https://stackoverflow.com/questions/12576798/angularjs-how-to-watch-service-variabes">this question</a>. None of solutions work.</p>
  
  <h3>View</h3>
  
  <pre><code>&lt;div ng-controller="PlayerController"&gt;
      {{ player.currentSong }}
  &lt;/div&gt;
  </code></pre>
  
  <h3>First one</h3>
  
  <pre><code>PlayerController = ($scope, PlayerService) -&gt;
      $scope.player = PlayerService
      return
  </code></pre>
  
  <h3>Second one</h3>
  
  <pre><code>PlayerController = ($scope, PlayerService) -&gt;
      $scope.$watch(
          'myApp.services.PlayerService'
          (newval, oldval) -&gt;
              $scope.currentSong = newval
          true
      )
      return
  </code></pre>