AngularJS ng-repeat and isolate scope

HTML

<script src="http://code.angularjs.org/angular-1.0.0.js"></script>
<div ng-app="myApp">
    <div ng-controller="myController">
        {{ message.value }}
        <person ng-repeat="person in persons"></person>
    </div>
</div>

CSS

person {
    border: 1px solid blue;
    background: aqua;
    padding:10px;
}

JavaScript

var app = angular.module('myApp', []);

app.controller('myController', function ($scope) {
    $scope.message = {
        value: "A"
    };
    $scope.persons = { 1: {}, 2: {}, 3: {} }
});

app.controller('PersonController', function ($scope) {
    $scope.message.value = "B";
});

app.directive("person", function () {
    return {
        restrict: 'E',
        transclude: true,
        controller: 'PersonController',
        template: '{{ message.value }}',
    };
});