title: Updating shared data between controllers
body: <p>I'm trying to implement data sharing between AngularJS controllers, I've followed an approach to share a service instance between two controllers and there's no problem with it, the data from a variable shows up. But, now I need to <strong>update a variable from a service so the change is going to be replicated by various controllers</strong>, so any controller that injects that same service has the same data.</p>
  
  <p>Here's my attempt to accomplish this...</p>
  
  <p>HTML template</p>
  
  <pre><code>&lt;h1&gt;Services data sharing&lt;/h1&gt;
  &lt;div ng-controller="OrderListController as vm"&gt;
    &lt;h3&gt;Orders list&lt;/h3&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;th&gt;Item name&lt;/th&gt;
        &lt;th&gt;Total&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr ng-repeat="order in vm.orders" ng-click="vm.selectOrder(order.id)"&gt;
        &lt;td ng-bind="order.item"&gt;&lt;/td&gt;
        &lt;td ng-bind="order.total | currency"&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;p&gt;&lt;i&gt;Click an order to see it's details.&lt;/i&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div ng-controller="OrderShowController as vm"&gt;
    &lt;h3&gt;Order detail&lt;/h3&gt;
    &lt;p&gt;
      &lt;b&gt;ID: &lt;/b&gt;&lt;span ng-bind="vm.order.id"&gt;&lt;/span&gt;
    &lt;/p&gt;
    &lt;p&gt;
      &lt;b&gt;Item name: &lt;/b&gt;&lt;span ng-bind="vm.order.item"&gt;&lt;/span&gt;
    &lt;/p&gt;
    &lt;p&gt;
      &lt;b&gt;Total: &lt;/b&gt;&lt;span ng-bind="vm.order.total | currency"&gt;&lt;/span&gt;
    &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript file</p>
  
  <pre><code>'use strict';
  
  angular
      .module('orderCrud', [])
      .service('OrderService', function() {
  
          this.selected = {};
  
          var orders = [{
              id: 1,
              item: 'Hamburger',
              total: 5.15
          }, {
              id: 2,
              item: 'Nachos',
              total: 2.75
          }, {
              id: 3,
              item: 'Hot Dog',
              total: 3.50
          }];
  
          function getOrders() {
  
              return orders;
          }
  
          function setSelected(id) {
  
              for (var i = orders.length - 1; i &gt;= 0; i--) {
  
                  if (orders[i].id === id) {
                      this.selected = orders[i];
                      console.log(this.selected);
                      break;
                  }
              }
          }
  
          return {
              get: getOrders,
              setSelected: setSelected
          };
      })
      .controller('OrderListController', function(OrderService) {
  
          var vm = this;
  
          vm.orders = OrderService.get();
  
          vm.selectOrder = function(id) {
  
              OrderService.setSelected(id);
          };
  
          vm.selectOrder(angular.copy(vm.orders).shift().id);
      })
      .controller('OrderShowController', function(OrderService) {
  
          var vm = this;
  
          vm.order = OrderService.selected;
      });
  </code></pre>
  
  <p><a href="https://plnkr.co/edit/8TVR5AbeUqXvG1Zk13rc?p=preview" rel="nofollow noreferrer">I've created a Plunker if you need it</a>.</p>
  
  <p>The goal is to show the selected order at the detail side of the template, that order should be changed if another order is clicked in the table at the list. And as you may notice, I'm not a fan of <code>$scope</code> or <code>$rootScope</code> in the controllers, if it isn't any way to implement this without injecting those scopes, please let me know.</p>
  
  <p>Any help is going to be highly appreciated, thank you!</p>