JSFiddle - React, Tailwind, and code Playground

by Jeremy Likness

HTML

<div ng-app="myApp">
  <div class="header" ng-controller="headerController"> 
    <a href="#" ng-click="onNewContactClicked()">New Contact</a>
    <a href="#" ng-click="onExportContactsClicked()">Export Contacts</a>
  </div>
  <div class="sidebar">
      <a ui-sref="Calendar()"></a>
      <a ui-sref="Contacts()" class="active"></a>
  </div>
  <div ui-view ng-controller="contactsController">{{message}}</div>
</div>

JavaScript

var app = angular.module("myApp", []);
app.controller("headerController", ['$scope', '$rootScope', function($scope, $rootScope) {
    this.$scope = $scope;
    this.$rootScope = $rootScope;
    var _this = this;
    $scope.onNewContactClicked = function() {
        _this.$rootScope.$broadcast("newContact");
    };
    $scope.onExportContactsClicked = function() {
        _this.$rootScope.$broadcast("exportContacts");
    };
}]);
app.controller("contactsController", ['$scope', function($scope) {
    this.$scope = $scope;
    var _this = this;
    $scope.$on("newContact", function() {
        _this.$scope.message = "Do new contact stuff.";
    });
    $scope.$on("exportContacts", function() {
        _this.$scope.message = "Do export stuff.";
    });
}]);