Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl1">
  I just set the global variable.
</div>
<div ng-controller="MyCtrl2">
  Hello, {{name}}!
</div>
<directive1></directive1>
<hr>
How do I make directive2 see $rootScope.name ?
<directive2></directive2>

JavaScript

var myApp = angular.module('myApp',[]);
function MyCtrl1($scope, $rootScope) {
    $rootScope.name = 'anonymous'; 
}

function MyCtrl2($scope, $rootScope) {
    $scope.name2 = $rootScope.name; 
}

myApp.directive('directive1', function() {
    return {
        restrict: 'E',
        replace: true,
//        scope:{},
        template: '<div>directive1 {{name}}</div>',
        controller: function ($scope) {}
    }
})

myApp.directive('directive2', function() {
    return {
        restrict: 'E',
        replace: true,
        scope:{},
        template: '<div>directive2 {{name}}</div>',
        controller: function ($scope) {}
    }
})