Simple jQuery Layout plugin with AngularJS directives

angularjs, jquery, plugin, layout, nested, directives

HTML

<body ng-app="myApp">
    <div id="outer-container" layout-container>
        <div class="ui-layout-west pane">WEST</div>
        <div class="ui-layout-center pane">fffMIDDLE</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;
}

.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 : false,
	                  livePaneResizing: true,
	                  size: 150
	                },
	                east: {
	                  resizable : true,
	                  initClosed : false,
	                  livePaneResizing: true,
	                  size: 150
	                }
	            });
        }
    }
});