JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html ng-app="Sandbox">
<head>
    <script type="text/javascript" src="http://code.angularjs.org/angular-1.0.0rc4.min.js"></script>
</head>
<body>
<h2>{{currentState}}</h2>
    <hr/>

<div ng-controller="PauseCtrl">
    <span ng-click="pause()">pause</span>
</div>
<div ng-controller="PlayCtrl">
    <span ng-click="play()">play</span>
</div>
<div ng-controller="StopCtrl">
    <span ng-click="stop()">stop</span>
</div>

</body>
</html>

JavaScript

var stateChange = "stateChange";
var module = angular.module('Sandbox', []);

module.run(function($rootScope) {
    $rootScope.$on(stateChange, function(name, state) {
        $rootScope.currentState = state;
    });
});

function PauseCtrl($scope) {
    $scope.pause = function() {
        $scope.$emit(stateChange, "pause");
    };
}

function PlayCtrl($scope) {
    $scope.play = function() {
        $scope.$emit(stateChange, "play");
    };
}

function StopCtrl($scope) {
    $scope.stop = function() {
        $scope.$emit(stateChange, "stop");
    };
}