Complex Nested jQuery Layout plugin with AngularJS directives

angularjs, jquery, plugin, layout, nested, directives

HTML

<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<body ng-app="myApp">
    <div id="outer-container" layout-container>
        <div class="ui-layout-west pane">WEST</div>
        <div class="ui-layout-center pane">
            <div id="middle-container" layout-middle>
                <div class="ui-layout-north pane top-panel">
                    <div id="top-container" layout-top>
                        <div class="ui-layout-center pane">TOP LEFT</div>
                        <div class="ui-layout-east pane">TOP RIGHT</div>
                    </div>
                </div>
                <div class="ui-layout-center pane bottom-panel">
                    <div id="bottom-container" layout-bottom>
                        <div class="ui-layout-center pane">BOTTOM LEFT</div>
                        <div class="ui-layout-east pane">BOTTOM RIGHT</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui-layout-east pane">EAST</div>
    </div>
</body>

CSS

body {
        color: #FFF;
        background: #262e37;
        text-align: center;
}

#outer-container {
        background: yellowgreen;
        position: absolute; 
        display: inline-block;
        top: 3em;
        bottom:2em;
        left:0em;
        right:0em;
        overflow: visible !important;
}

#middle-container {
        display: inline-block;
        width:100%;
        height: 100%;
        background: #ACA1A0; 
}

#top-container {
        display: inline-block;
        background: #ACA1A0;
        width: 100%;
        height: 100%;
}
#bottom-container {
        display: inline-block;
        background: #ACA1A0;
        width: 100%;
        height: 100%;
}

.pane {
        border: 1px solid #191D24;
        background: #D8D4C6;
}

/* STYLE THIS TO CHANGE THE HANDLE */
.ui-layout-toggler {
        background-color: white;
}

JavaScript

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

app.directive('layoutContainer', function() {
    return {
    	scope: {},
        link: function (scope, element, attrs) {
	        	var layout = element.layout({
	                west: {
	                  resizable : true,
	                  initClosed : true,
	                  livePaneResizing: true,
	                  size: 350
	                },
	                east: {
	                  resizable : true,
	                  initClosed : true,
	                  livePaneResizing: true,
	                  size: 350
	                }
	            });
        }
    }
});

app.directive('layoutMiddle', function() {
    return {
    	scope: {},
        link: function (scope, element, attrs) {
	        	var layout = element.layout({
	                north: {
					      size: .5,
					      livePaneResizing: true
					    }
	            });
        }
    }
});

app.directive('layoutTop', function() {
    return {
        link: function (scope, element, attrs) {
	        angular.element(element).layout({
                east: {
				      size: .5,
				      livePaneResizing: true
				    }
	        });
        }
    };
});

app.directive('layoutBottom', function() {
    return {
        link: function (scope, element, attrs) {
        	angular.element(element).layout({
                east: {
				      size: .5
				    }
            });

        }
    };
});