title: Controllers not talking to each other via service in Angular JS
body: <p>I am trying to send data from one controller to another with no success. I have tried all ideas found on Stack Overflow using Angular services and I can't see what's wrong with my code.</p>
  
  <p>I have a first controller that lists some items (CartSidebarCtrl). It also has the ability to remove items from the list.</p>
  
  <p>I have another controller that should display the number of items (TopCartCtrl).</p>
  
  <p>On page load, the second controller displays the correct number of items. But when I remove some items in the first controller, the second is not updated.</p>
  
  <p>What am I doing wrong here ?</p>
  
  <p>HTML Code: </p>
  
  <pre><code>&lt;div ng-controller="CartSidebarCtrl"&gt;
      &lt;ul&gt;
          &lt;li ng-repeat="product in products"&gt;
              {{product.name}} (&lt;span style="color: blue; cursor: pointer" ng-click="remove($index)"&gt;Remove&lt;/span&gt;)
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div ng-controller="TopCartCtrl"&gt;
      &lt;span&gt;{{topCartText}}&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Angular Code:</p>
  
  <pre><code>magentoApp.factory('cartModel', function () {
      var cartModel = {};
  
      cartModel.updateProducts = function(products) {
          cartModel.products = products;
      };
  
      return cartModel;
  });
  
  magentoApp.controller('CartSidebarCtrl', ['$scope', '$http', 'cartModel', function($scope, $http, cartModel) {
      $scope.products = [
          { name: 'Product 1' },
          { name: 'Product 2' }
      ];
  
      $scope.remove = function($index) {
          $scope.products.splice($index, 1);
          updateTopCart();
      }
  
      updateTopCart = function() {
          cartModel.updateProducts($scope.products);
      }
  
      updateTopCart();
  }]);
  
  magentoApp.controller('TopCartCtrl', ['$scope', 'cartModel', function($scope, cartModel) {
      $scope.topCartText = cartModel.products.length;
  }]);
  </code></pre>
  
  <hr>
  
  <p>[EDIT WITH UPDATED CODE WORKING]</p>
  
  <p>Beside the fact that object reference was not correct as mentionned by 'm59' and 'Jesus Rodriguez', I was calling for .length on cartModel.products. For the same reason, my template was not updated. My solution is then to pass the products object to the template and call .length on this template. Then, I wanted to display a different text based on products.length and made this work by creating a custom filter.</p>
  
  <p>Here is the correct code.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-controller="TopCartCtrl"&gt;
      &lt;span&gt;{{products.length | topCartFilter}}&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div ng-controller="CartSidebarCtrl"&gt;
      &lt;ul&gt;
          &lt;li ng-repeat="product in products"&gt;
              {{product.name}} (&lt;span style="color: blue; cursor: pointer" ng-click="remove($index)"&gt;Remove&lt;/span&gt;)
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Angular:</p>
  
  <pre><code>magentoApp.factory('cartModel', function() {
      var cartModel = {
          products: [
              { name: 'Product 1' },
              { name: 'Product 2' }
          ]
      };
      return cartModel;
  });
  
  magentoApp.filter('topCartFilter', function() {
      return function(productsCount) {
          return (productsCount &gt; 0) ? 'You have ' + productsCount + ' items in your cart': 'Your cart is empty';
      };
  });
  
  magentoApp.controller('TopCartCtrl', ['$scope', 'cartModel', function($scope, cartModel) {
      $scope.products = cartModel.products;
  }]);
  
  magentoApp.controller('CartSidebarCtrl', ['$scope', 'cartModel', function($scope, cartModel) {
      $scope.products = cartModel.products;
  
      $scope.remove = function($index) {
          $scope.products.splice($index, 1);
      }
  }]);
  </code></pre>