title: Directive interacting with rootScope not working in Angular JS
body: <p>I am trying to interact with the <code>rootScope</code> in order to make a modal appear. I have a very basic directive that I am trying to use <code>rootScope</code> paired with an <code>ng-show</code>.</p>
  
  <p>Here is the code for the directive:</p>
  
  <pre><code>.directive('modal', ['$rootScope', function ($rootScope) {
      return {
          restrict: 'A',
          templateUrl: 'view/templates/modal-confirm.tpl.html',
          link: function (scope, element, attrs) {
              console.log(scope);
  
              element.on('click', function() {
                  scope.$root.confirmModal.isVisible = true;
                  console.log('open modal');
              });
          }
      }
  }])
  </code></pre>
  
  <p>When I log the <code>scope</code> variable, it is showing me as having <code>$root</code> updated with the <code>isVisible: true</code> however, my modal doesn't appear. If I change the <code>scope.$root.confirmModal.isVisible = true;</code> to <code>$rootScope.confirmModal.isVisible = true;</code> I get the same result, the console.log is working but no modal appearing.</p>
  
  <p>This is the code for the modal template:</p>
  
  <pre><code>&lt;!-- Confirm Modal Template --&gt;
  &lt;div ng-if="$root.confirmModal.isVisible" class="overlay"&gt;
      &lt;div class="overlay-content extended"&gt;
          &lt;span&gt;{{ $root.confirmModal.content }}&lt;/span&gt;
          &lt;div class="buttons"&gt;
              &lt;button ng-click="$root.confirmModal.isVisible = false;" class="btn btn-default half"&gt;Cancel&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is it not possible to interact with the <code>$rootScope</code> in a directive?</p>
  
  <p>Updated code using <code>scope</code> instead of <code>$rootScope</code>:</p>
  
  <pre><code>.directive('modal', ['$rootScope', function ($rootScope) {
      return {
          restrict: 'A',
          templateUrl: 'view/templates/modal-confirm.tpl.html',
          link: function (scope, element, attrs) {
              scope.isVisible = false;
  
              element.on('click', function() {
                  scope.isVisible = true;
                  console.log(scope);
                  console.log('open modal');
              });
          }
      }
  }])
  
  &lt;!-- Confirm Modal Template --&gt;
  &lt;div ng-if="isVisible" class="overlay"&gt;
      &lt;div class="overlay-content extended"&gt;
          &lt;span&gt;hello world&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Same result however.</p>