Controllers

by Rob Rothe

HTML

<div ng-app="app">
  <div ng-controller="ControllerA as ctrl">
    <h4>Controller A</h4>
    <form ng-submit="ctrl.updateData()">
      <input type="text" ng-model="ctrl.data.name">
      <button type="submit">Save</button>
    </form>
  </div>

  <hr>

  <div ng-controller="ControllerB as ctrl">
    <h4>Controller B</h4> Data: {{ctrl.data.name}}
  </div>


</div>

JavaScript

angular
  .module('app', [])
  .controller('ControllerA', ControllerA)
  .controller('ControllerB', ControllerB)
  .factory('Service', Service);

function Service() {
  var service = {
    data: {
      name: 'Rob'
    }
  };

  return service;
}

function ControllerA(Service, $rootScope) {
  var vm = this;

  vm.data = angular.copy(Service.data);
  vm.updateData = updateData;

  function updateData() {
    Service.data.name = vm.data.name;
    $rootScope.$broadcast('data_updated', vm.data);
  }
}

function ControllerB(Service, $scope) {
  var vm = this;

  vm.data = Service.data;

  $scope.$on('data_updated', function(e, data) {
    alert('new data: ' + data.name);
  });
}