JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div ng-app="myApp">
    <div ng-controller="headerController">
        <button ng-click="clickHandler()">Show Alert From Main Controller</button>
    </div>
    <div ng-controller="mainController">
    </div>
</div>

JavaScript

myApp = angular.module("myApp",[]);

myApp.service("myService", function(){
    showAlertBool = false;
    return {
        showAlert: function (value) {
               showAlertBool = value;
        },

        canShowAlert: function () {
            return showAlertBool;
        }
    }
});

myApp.controller("headerController", function($scope, myService){
    console.log(myService);
    $scope.clickHandler = function(){
        myService.showAlert(true);
    }
});

myApp.controller("mainController", function($scope, myService){
    console.log(myService);
    $scope.getServiceValue = function(){
        return myService.canShowAlert();
    }
    
    $scope.$watch("getServiceValue()", function(newValue, oldValue){
        console.log("newValue " + newValue);
        console.log("oldValue " + oldValue);
        if(newValue === true && newValue !== oldValue){
            myService.showAlert(false);
            alert("I can show Alert now!!!");
        }
    });
});