<!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.counterService.counter}}
  </div>
  <div ng-controller="CounterController as counterCtrl">
    {{counterCtrl.counterService.counter}}
    <button ng-click="counterCtrl.addProduct()">Add Product</button>
  </div>
</body>
</html>
   (function(){
  angular
  .module('app', []);
})();

(function(){
  angular
    .module('app')
.factory('counterService', function() {
    
    var counterService = {};
    counterService.counter = 0;
 

  counterService.increase = function() {
      counterService.counter +=1;
  };

  return counterService;
  });
})();

(function(){
  angular
  .module('app')
  .controller('HeaderController', HeaderController);
  
  HeaderController.$inject = ['$scope','counterService'];
  function HeaderController($scope, counterService){
    var vm = this;   
   
    vm.counterService = counterService;
 }
})();

(function(){
  angular
  .module('app')
  .controller('CounterController', CounterController);
  
  CounterController.$inject = ['$scope',  'counterService'];
  function CounterController($scope, counterService){
    var vm = this;   
     vm.counterService = counterService;
    
    vm.addProduct = addProduct;
    
    
    function addProduct(){
      counterService.increase();
      console.log(vm.counterService);
    }
  }
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.