Why can't the $rootScope be accessed in the template of a directive with isolate scope?

Question

With isolate scope the template of the directive does not seem to be able to access the controller ('Ctrl') $rootScope variable which, however, does appear in the controller of the directive. I understand why the controller ('Ctrl') $scope variable isn't visible in the isolate scope.

HTML:

<div ng-app="app">     <div ng-controller="Ctrl">         <my-template></my-template>     </div>      <script type="text/ng-template" id="my-template.html">         <label ng-click="test(blah)">Click</label>     </script> </div> 

JavaScript:

angular.module('app', [])     .controller('Ctrl', function Ctrl1($scope,  $rootScope) {         $rootScope.blah = 'Hello';         $scope.yah = 'World'     })     .directive('myTemplate', function() {         return {             restrict: 'E',             templateUrl: 'my-template.html',             scope: {},             controller: ["$scope", "$rootScope", function($scope, $rootScope) {                 console.log($rootScope.blah);                 console.log($scope.yah);,                  $scope.test = function(arg) {                     console.log(arg);                 }             }]         };     }); 

JSFiddle

The variable is accessed with no isolate scope - as can be seen by commenting the isolate scope line:

        // scope: {}, 

Answer 1

You can try this way out using $root.blah

Working Code

html

 <label ng-click="test($root.blah)">Click</label> 

javascript

  angular.module('app', [])     .controller('Ctrl', function Ctrl1($scope,  $rootScope) {         $rootScope.blah = 'Hello';         $scope.yah = 'World'     })     .directive('myTemplate', function() {         return {             restrict: 'E',             templateUrl: 'my-template.html',             scope: {},             controller: ["$scope", "$rootScope", function($scope, $rootScope) {                 console.log($rootScope.blah);                 console.log($scope.yah);                  $scope.test = function(arg) {                     console.log(arg);                 }             }]         };     });