JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<body ng-app="myApp">
  <div ng-controller="HeaderCtrl">
    <p>{{appContext.foo}}</p>
    <div ng-click="openSideMenu()">
      --Open--
    </div>
  </div>

  <div ng-controller="SideMenuCtrl">
    <p>{{appContext.isSideMenuOpen ? 'Menu is open' : 'Menu is hidden'}}</p>
  </div>
</body>

JavaScript

var app = angular.module('myApp', []);

app.service('AppContextService', function() {
  this.context = {
    isSideMenuOpen: false
  };
});

app.controller('SideMenuCtrl', function($scope, AppContextService) {
  $scope.appContext = AppContextService.context;
});

app.controller('HeaderCtrl', function($scope, AppContextService) {
  $scope.appContext = AppContextService.context;
  $scope.openSideMenu = function() {
    $scope.appContext.isSideMenuOpen = true;
  };
});