title: Accessing ng-hide value of one controller to manipulate ng-style of another controller within a global controller
body: <p>So I am trying to access the boolean value of ng-hide from one controller to change css properties of another controller using a global controller. Here is the link on jsfiddle: <a href="https://jsfiddle.net/dqmtLxnt/" rel="nofollow">https://jsfiddle.net/dqmtLxnt/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div ng-controller="mainCtrl"&gt;
      &lt;div class="first" ng-style="changeColor" ng-controller="firstCtrl"&gt;
          {{ accessOne }}
      &lt;/div&gt;
      &lt;div class="second" ng-hide="hideSecond" ng-controller="secondCtrl"&gt;
          {{ accessTwo }}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>angular.element(document).ready(function() {
      angular.module('app', [])
          .controller('mainCtrl', ['$scope', function($scope) {
              if ($scope.hideSecond == true) {
                  $scope.changeColor = {
                      'color': 'blue'
                  };
              }
          }]).controller('firstCtrl', ['$scope', function($scope) {
              $scope.accessOne = "One";
          }]).controller('secondCtrl', ['$scope', function($scope) {
              $scope.accessTwo = "Two";
              $scope.hideSecond = true;
          }]);
      angular.bootstrap(document.body, ['app']);
  });
  </code></pre>
  
  <p>I am able to change both <code>changeColor</code> and <code>hideSecond</code> from <code>mainCtrl</code> but I'm not able to access the value set from <code>secondCtrl</code> in the <code>mainCtrl</code>. I even tried setting <code>hideSecond=true</code> in <code>ng-hide</code> and access it on <code>mainCtrl</code> but to no avail.</p>
  
  <p>Can someone help me on this?</p>