Moving child directive from template to compile fn breaks scope connections - angularjs

Question

I have nested directives, both creates new scopes. To preserve original content I decide to move child directive to compile function of parent directive. This move breaks connection between scopes, could someone explain me why? Thanks
jsfiddle: (remove template from parent directive to see the issue)
http://jsfiddle.net/luckylooke/uDkd3/9/
var myApp = angular.module('myApp', [])
.directive('parent', function directive() {
return {
compile: function(elm){
elm.append("</br> Appended <div child></div>");
},
template:"</br>From 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);
}
};
});

Answer 1

The Problem
As per this answer in Angularjs isolated scope for directives without own template:
[...] only elements in a template for the directive will be bound to
the isolated scope created by that directive. If you don't use a
template - content of the element, on which the directive is declared,
will bind as if isolated scope was not there.
Here is what your scope hierarchy looks like with a template:
... and here is what it looks like without one:
A Solution
Use transclusion to inject elements from your view into parent without using compile:
.directive('parent', function directive() {
return {
transclude: true,
template:"</br><div ng-transclude></div>From template <div child></div>",
scope: {},
controller: function ($scope) {
$scope.who = "parent";
$scope.message = "Text message";
}
};
})
Demo
Here the child directive is again an actual child of the parent directive. Notice too that the transcluded content appears in another scope which is a sibling of parent's isolate scope: