Experiments in communicating between nested controllers with AngularJS

var app = angular.module('plunker', []);

app.service('EditorService', function ()
{
  var product = undefined;

  return{
     remember: function ( input ){
         product = input;
     },

     areWeEditing: function( input )
     {
       return( input == product );
     },
     
     product: function (){
         return product;
     }
 };
});


app.controller('ParentCtrl', ['$scope', 'EditorService', function($scope, EditorService) 
{
  $scope.products = 
  [
    {name: 'eggs', price: 3.20},
    {name: 'cup', price: 1.75},
    {name: 'poster', price: 3.99}
  ];
  
  $scope.areWeEditing = EditorService.areWeEditing;
  
  $scope.edit = function(product)
  {
    EditorService.remember(product);
  }
}]);


app.controller('EditProductCtrl', ['$scope', 'EditorService', function($scope, EditorService ) 
{
  $scope.editor = EditorService;
  $scope.$watch('editor.product()', function() {alert('it changed');});
}]);

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <title>AngularJS Plunker</title>
    <!-- angular -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
    <!-- your app.js file -->
    <script src="app.js"></script>
    <!-- bootstrap css -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
    <!-- your style.css file -->
    <link href="style.css" rel="stylesheet" />
  </head>


  <body ng-controller="ParentCtrl">
  
    <div class="hero-unit">
      <h3>Experiments with Nested Controller Communication</h3>
    </div>
    
    Products:
    <ul>
      <li ng-class="{'active': areWeEditing(product)}" ng-click="edit(product)" ng-repeat="product in products">{{product.name}}</li>
    </ul>
    
    <div ng-controller="EditProductCtrl">
      <div ng-show="productBeingEdited">
        <h2>Editing {{productBeingEdited.name}}</h2>
      </div>
    </div>
  </body>
</html>

/* Put your css in here */
.active {
  color: blue;
}