How to make nested transclusion in angular work?

You should ng-transculde inside the inner directive since transclude replaces the inner html

angular.module('transclude', []).directive('outer', function(){    return {        restrict: 'E',        replace: true,        transclude: true,        template: '<div style="border: 1px solid black;">' +            '<div>Outer</div>' +            '<inner><div ng-transclude></div></inner>' +            '</div>'        };});

No change to inner directive needed.

I have updated the fiddle here

Another way to do this, which can be useful in self contained components is displayed in this JSFiddle

.directive('outer', function(){    return {      restrict: 'E',      replace: true,      transclude: true,      template: '<div style="border: 1px solid black;">' +                '<div>Outer</div>' +                '<inner></inner>' +                '</div>'    }; }).directive('inner', function(){     return {         restrict: 'E',         replace: true,         require: '^outer',         template :'<div style="border: 1px solid red;">' +                   '<div>Inner</div>' +                   '<div ng-transclude></div>' +                   '</div>'     }; });

This will pass the transclude: true down the dom tree to the inner directive.

The downside of this is that the cannot be used by itself and in the jsfiddle it throws an ngTransclude: Orphan Directive Error

Because of this I require that the inner directive be a child of the outer directive, that way it will always have the transclusion passed down to it.

This is really nice to break up large directives into smaller ones.