Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script type="text/ng-template" id="body.html">
    <h1> {{title}} </h1>
    <hr/>
    
    <div id="firstPanel" class="inner-panel" ng-transclude="left"></div>
    <div id="innerMiddleContent" class="inner-panel">middle private content here</div>
    <div id="secondPanel" class="inner-panel" ng-transclude="right"></div>
</script>

<div body title="Sample Body Directive">
    <panel-left>
        Public content that goes on the left
    </panel-left>   
    
    <panel-right>
        Public content that goes on the right
    </panel-right>    
</div>

CSS

#firstPanel {
    border: 1px solid red;
    height: 50px;
}

#secondPanel {
    border: 1px solid green;
    height: 50px;
}

JavaScript

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

myApp.directive('body', function () {
    return {
        restrict: 'A',
        transclude: {
        left:'?panelLeft',
        right:'?panelRight'
        },
        scope: {
            title: '@'
        },
        templateUrl: 'body.html'
    };
});

myApp.directive('panelLeft', function () {
    return {
        require: "^body",
        restrict: 'A',
        transclude: true,
        replace: true,
        template: '<div ng-transclude></div>'
    };
});

myApp.directive('panelRight', function () {
    return {
        require: "^body",
        restrict: 'A',
        transclude: true,
        replace: true,
        template: '<div ng-transclude></div>'
    };
});