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="controller1">
        <button ng-click="clickHandler()">clicked</button>
    </div>
    <div ng-controller="controller2">
        {{getServiceValue()}}
    </div>
</div>

JavaScript

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

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

        getValue: function () {
            return myServiceVariable;
        }
    }
});

myApp.controller("controller1", function($scope, myService){
    console.log(myService);
    $scope.clickHandler = function(){
    $scope.isActive = !$scope.isActive
        myService.setValue($scope.isActive);
    }
});

myApp.controller("controller2", function($scope, myService){
    console.log(myService);
    $scope.getServiceValue = function(){
        return myService.getValue();
    }
});