JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="">
    <div ng-controller="Control1">
        <div>{{count1}}</div>
        <button ng-click="click1()">Call both click methods from controller 1</button>
    </div>
    <div ng-controller="Control2">
        <div>{{count2}}</div>
        <button ng-click="click2()">Call both click methods from controller 2</button>
    </div>
</div>

CSS

</style> <script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script> <style>

JavaScript

function Control1($scope, $rootScope) {
    $scope.count1 = 0;
    $scope.$on('clicked2', function() {
        $scope.count1++;
    });
    $scope.click1 = function () {
        $scope.count1++;
        $rootScope.$broadcast('clicked1');
    }
}

function Control2($scope, $rootScope) {
    $scope.count2 = 0;
    $scope.$on('clicked1', function() {
        $scope.count2 = $scope.count2 + 2;
    })
    $scope.click2 = function () {
        $scope.count2 = $scope.count2 + 2;
        $rootScope.$broadcast('clicked2');
    }
}