<!DOCTYPE html>
<html ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
</head>
<body>
  <div ng-controller="HeaderController as headerCtrl">
    {{headerCtrl.counter}}
  </div>
  <div ng-controller="CounterController as counterCtrl">
    {{counterCtrl.counter}}
    <button ng-click="counterCtrl.addProduct()">Add Product</button>
  </div>
  
</body>
</html>
      (function(){
  angular
  .module('app', []);
})();

(function(){
  angular
    .module('app')
.run(function($rootScope) {
});
})();


(function(){
  angular
  .module('app')
  .controller('CounterController', CounterController);
  
  CounterController.$inject = ['$scope',  '$rootScope'];
  function CounterController($scope, $rootScope){
    var vm = this;   
    vm.counter = 0;
    
    vm.addProduct = addProduct;
    
    
   $rootScope.$on('addProduct', function(event, data){
      vm.counter = data;
    });
    
    function addProduct(){
      $rootScope.$broadcast('addProduct',vm.counter + 1);
    }
  }
})();


(function(){
  angular
  .module('app')
  .controller('HeaderController', HeaderController);
  
  HeaderController.$inject = ['$scope', '$rootScope'];
  function HeaderController($scope, $rootScope){
    var vm = this;   
    vm.counter = 0;
    
    $rootScope.$on('addProduct', function(event, data){
      vm.counter = data;
    });
  }
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.