Talking Controllers

HTML

<h5>Set the Data</h5>
<div ng-controller="Ctrl1">
    <button ng-click="changeData(person)"></button>
    name: {{person.name}} age: {{person.age}} occupation: {{person.occupation}}
</div>
<div ng-controller="Ctrl2">
    <button ng-click="changeData(person)"></button>
    name: {{person.name}} age: {{person.age}} occupation: {{person.occupation}}</div>

<h5>Get the data</h5>
<div ng-controller="Ctrl3">
    <button ng-click="getData()"></button>
    name: {{person.name}} 
    age: {{person.age}} 
    occupation: {{person.occupation}}
</div>

JavaScript

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

myApp.controller('Ctrl1', ['$scope', 'shareData', function($scope, shareData) {
    $scope.person = {
        name: 'Joe',
        age: '35',
        occupation: 'Pizza Chain Owner'
    };
    $scope.changeData = function(data) {
       shareData.setData(data);
    };
    $scope.getData = function(data) {
       $scope.person = shareData.getData();
    };
}]);
                           
myApp.controller('Ctrl2', ['$scope', 'shareData', function($scope, shareData) {
    $scope.person = {
        name: 'Dr Dre',
        age: '30',
        occupation: 'Rapper'
    };
    $scope.changeData = function(data) {
       shareData.setData(data);
    };
    $scope.getData = function(data) {
       $scope.person = shareData.getData();
    };
}]);
                        
myApp.controller('Ctrl3', ['$scope', 'shareData', function($scope, shareData) {
    
    $scope.changeData = function(data) {
       shareData.setData(data);
    };
    $scope.getData = function(data) {
       $scope.person = shareData.getData();
    };
   
}]);

myApp.factory('shareData', function() {
    var shareData = {};
    
    shareData.setData = function(dataEntered) {
        shareData = dataEntered;
    };
    
    shareData.getData = function() {
      return shareData;  
    };
    
    return shareData;
});