AngularJS Example

HTML

<div ng-app="transclude">
  <div ng-controller="Ctrl as ctrl">
    <textarea ng-model="ctrl.text"></textarea> <br/>
      <outer>ctrl.text: ({{ctrl.text}}) &lt;-- this shouldn't be empty.</outer>
      <p/>
    <inner>ctrl.text: ({{ctrl.text}})</inner>
  </div>
</div>

CSS

</style> <!-- Ugly Hack to make remote files preload in jsFiddle --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<style>

JavaScript

function Ctrl() {
  this.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
}

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