JSFiddle - React, Tailwind, and code Playground

by Diogo Soares

HTML

<body ng-app="myApp">
  <div ng-controller="FooCtrl">
    <input type="button" ng-click="openDiv()" value="Botão 1"/>
    <div ng-controller="Controller2">
      <input type="button" ng-click="openDiv()" value="Botão 2"/>
      <div class="div" ng-show="visivel">
        conteúdo da div
      </div>
    </div>
  </div>
</body>

CSS

.div{
  width: 100px;
  height: 100px;
  background: red;
}

JavaScript

angular.module('myApp', [])
  .factory('aService', [
    '$rootScope',
    function($rootScope) {
      var visivel = false;

      var service = {
        set setVisivel(a) {
          visivel = a;
          if ($rootScope.$$phase != '$apply' && $rootScope.$$phase != '$digest') {
            $rootScope.$apply();
          }
        },
        get getVisivel() {
          return visivel;
        }
      };

      // Create a new array on each update, appending the previous items and 
      // adding one new item each time
      /*setInterval(function() {
        if (service.foo.length < 10) {
          var newArray = [];
          Array.prototype.push.apply(newArray, service.foo);
          newArray.push(Math.random());
          service.foo = newArray;
        }
      }, 1000);*/

      return service;
    }
  ])
  .controller('FooCtrl', [
    '$scope',
    'aService',
    function FooCtrl($scope, aService) {
      $scope.openDiv = function(){
      	
      }
    }
  ])
  .controller('Controller2', [
    '$scope',
    'aService',
    function Controller2($scope, aService) {
    	$scope.visivel = aService.getVisivel;
      console.log(aService.getVisivel);
      $scope.openDiv = function(){
      	console.log('foi clicado');
      	aService.setVisivel = true;
        console.log(aService.getVisivel);
	      $scope.visivel = aService.getVisivel;
      }
      
    }
  ]);