title: AngularJS watch service value change instead of scope inheritance
body: <p>I just give a try to AngularJS. I try to do something quite simple but I'd like to do it the good way.</p>
  
  <p>I got a list of items in a table which displays name and quantity for each item.
  I have a form under the table.</p>
  
  <p>When I click on an item name from the table I'd like the given item to be updatable through the form.</p>
  
  <p>I achieve to do thing with scope inheritance as in fiddle <a href="http://jsfiddle.net/5cRte/1/" rel="nofollow">http://jsfiddle.net/5cRte/1/</a></p>
  
  <p>View :</p>
  
  <pre><code>&lt;tr ng-repeat="item in items"&gt;
    &lt;td&gt;&lt;a href="#" ng-click="selectCurrentItem(item)"&gt;{{item.name}}&lt;/a&gt;&lt;/td&gt;
    &lt;td&gt;{{item.quantity}}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Controllers :</p>
  
  <pre><code>function ItemListController($scope){
      $scope.items = [{name:'item1', quantity:10}, {name:'item2', quantity:5}];
  
      $scope.selectCurrentItem = function(currentItem) {
          $scope.currentItem = currentItem;
      }
  }
  
  function ItemFormController($scope){
      $scope.$watch('currentItem', function() {
          $scope.item = $scope.currentItem; 
      });
  }
  </code></pre>
  
  <p>But has I read in some topics, it is not a good practice to couple controllers scopes this way, and preferably I'll wan't to use a service to store variables shared between controllers.</p>
  
  <p>I was able to put a static variable in a service and retrieve it in another controller, but I can't make it updated when clicking on the item from the table, as watch not working on services variable. Have you an hint, for this ?</p>
  
  <p>Thanks in advance</p>