Directive inside another with each requesting scope

Was having issues getting 2 directives to work inside each other - which was giving errors.

HTML

<script src="http://ci.angularjs.org/job/angular.js-angular-master/ws/build/angular.min.js"></script>
<div ng-app="interfaceSettings" ng-controller="TestDirective">
    <b>Version: </b> {{settings.angularVersion.full}}<br/>

    <h3>Label</h3>
    <ei-label label="My Label">My Content inside my label.</ei-label>
    
    <h3>Description</h3>
    <ei-description description="This is my description">This is my description footnote.</ei-description>
    
    <h3>Together</h3>
    <ei-label label="Combined Label">
        <ei-description description="Combined Description">Combined Description Footnote</ei-description>
    </ei-label>
    
    <h3>Double Embed</h3>
    <ei-label label="Combined Label">
        <ei-description description="Combined Description">Combined Description Footnote 1
            <ei-label label="Double Embed Label">
                <ei-description description="Double Embed Description">Combined Description Footnote 2</ei-description>
            </ei-label>
        </ei-description>
    </ei-label>
    
    
        <h3>eiLabelDescription</h3>
    <!-- <ei-label-description description="eiLabelDescription Description">eiLabelDescription Description Footnote 1</ei-label-description> -->

 
</div>

CSS

body {
    padding: 10px; 
    font-family: sans-serif; 
    font-size: 0.9em;
}
h3 {margin-bottom:5px;font-weight:bold;font-size:1.1em;border-bottom:solid 1pt #eee;}
div.example {
    margin:5%;border:solid 1pt #ddd;padding:10px;   
}

div.eiDescription {
    margin: 5% 10%; padding: 10px;
    border: solid 1pt black;
    background-color: #eee;
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,.4);
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.4);
    box-shadow: 0 2px 4px rgba(0,0,0,.24);    
}

div.eiDescription .tclude {
    margin-top: 10px;padding: 10px;
    border: solid 1pt black;
    background-color: #444;
    color: white;
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,.4);
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.4);
    box-shadow: 0 2px 4px rgba(0,0,0,.24); 
}

JavaScript

var settingsModule = angular.module('interfaceSettings', []);
settingsModule.directive('eiLabel', function() {
    return {
        restrict: 'E',
        replace: 'true',
        transclude: true,
        scope: {
           label: 'attribute',      
        },
        template: '<div class="example" ng-transclude><label style="font-weight:bold;">{{label}}</label><br/>Content from template.<br/></div>',
    };
});

settingsModule.directive('eiDescription', function() {
    return {
        restrict: 'E',
        replace: 'true',
        transclude: true,
        scope: {
           description: 'attribute',  
        },
        template: '<div class="eiDescription">{{description}}<br/><div class="tclude ng-transclude"></div></div>',
    };
});

settingsModule.directive('eiLabelDescription', function() {
    return {
        restrict: 'E',
        replace: 'true',
        transclude: true,
        scope: {
           description: 'attribute',
        },
        template: '<ei-label label="eiLabelDescription Label"><ei-description description="{{description}}">eiLabelDescription Description Footnote</ei-description></ei-label>'
    };
});

function TestDirective($scope) {
    $scope.settings = {
        angularVersion: angular.version,
        serverName: 'vaiism',
        serverType: 'Sun Ultra 40',
        serverUser: 'rweeks',
        serverCity: 'Jacksonville',
        required: false
    };
}