<body ng-app='MainApp'>
    <div ng-controller='MainCtrl'>
      <div>
        <h4>Ctrl1</h4>
        <div>{{text}}</div>
        <input type='text' ng-model='text' />
        <button type='button' ng-click='send();'>Send Data</button>
      </div>
    </div>
    <div ng-controller='MainCtrl2'>
      <div>
        <h4>Ctrl2</h4>
        <div>{{text}}</div>
      </div>
    </div>
</body>
var mainMod = angular.module('MainApp', []);
mainMod.controller('MainCtrl', ['$scope','dataShare',
    function ($scope,dataShare) {         
         $scope.text = 'Hey';
         $scope.send = function(){
           dataShare.sendData($scope.text);
         };

    }
]);
mainMod.controller('MainCtrl2', ['$scope','dataShare',
    function ($scope,dataShare) {         
         
				$scope.text = '';
       			$scope.$on('data_shared',function(){
							var text =  dataShare.getData();    
              $scope.text = text;
        });
    }
]);
mainMod.factory('dataShare',function($rootScope){
  var service = {};
  service.data = false;
  service.sendData = function(data){
      this.data = data;
      $rootScope.$broadcast('data_shared');
  };
  service.getData = function(){
    return this.data;
  };
  return service;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://code.angularjs.org/1.3.8/angular.min.js