JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="demo" ng-init="" ng-controller="Root">
    
    <div ng-controller="Header">
        User is logged in <strong> {{userIsLoggedIn}} </strong> 
     
    </div>
    <div ng-controller="Dynamic">      
     <button ng-click="logout()">Logout</button>
    </div>
  
</div>

CSS

input { display: block; }

JavaScript

var module = angular.module("demo", []);

function Header ($scope){
        
    $scope.userIsLoggedIn = true
    $scope.$on('DO_LOGOUT',function(event){
    alert('Header is updating log-status')
    $scope.userIsLoggedIn=false
    }
        )
}
function Dynamic($scope){

   $scope.logout =function(){
        $scope.$emit('LOGOUT_REQUESTED')
    }
}

function Root($scope) {
   
    $scope.$on('LOGOUT_REQUESTED',function(event){
        alert('Rootscope got logout event')
        $scope.$broadcast('DO_LOGOUT')
    })   
}