AngularJS testing scopes

HTML

<div ng-app="myApp">
    <div class="parent" parent>parent content cant be moved from this structure</div>
</div>

CSS

.child {
    height:100px;
    width:100px;
    background: #bb99dd;
}
.parent {
    margin:100px;
    width:300px;
    min-height:150px;
    background:#ddeebb;
    padding:2em
}

JavaScript

var myApp = angular.module('myApp', [])
    .directive('parent', function directive() {
    return {
        transclude: true,
        template:"<div ng-transclude></div></br>parent template<div child></div>",
        scope: {},
        controller: function ($scope) {
            $scope.who = "parent";
            $scope.message = "Text message";
            //console.log($scope);
        }
    };
}).directive('child', function directive() {
    return {
        replace: true,
        scope: {},
        template: '<div class="child">child with {{$parent.message || "NO message!"}}</div>',
        controller: function ($scope) {
            $scope.who = "child";
            //console.log($scope);
        }
    };
});