AngularJS and jQuery UI Layout compatibility

Question

I'm struggling to get a very basic layout using jQuery UI Layout (downloaded from here).

Following is the ng-includeed page:

<div id="Main_Working_Page" ng-controller="Main_Working_Page_Controller" style="height:100%;">

    <div id="Muti_Panel" style="height:100%">

        <div class="ui-layout-north">
            This is the north pane
        </div>
        
        <div class="ui-layout-west">
            This is the north west
        </div>
        
        <div id="tabs-center" class="ui-layout-center no-scrollbar add-padding grey">
            
            This is the central panel
            
        </div>
 
    </div>
    
</div>

and here is the controller for this page:

MyApp.controller('Main_Working_Page_Controller' , ['$rootScope' , '$scope' ,  'DB_Services' , function( $rootScope , $scope , DB_Services) {
    
    console.log(">>> Started Main_Working_Page_Controller") ;

    var Main_Page_Layout = $("#Muti_Panel").layout(
        {
            defaults: {
                fxName              :   "slide"     ,
                fxSpeed             :   "slow"      ,
                spacing_closed      :   14          ,
                initClosed          :   false       ,
                size                :   "200"       ,
                spacing_open        :   6           ,
                spacing_closed      :   6 
            }    ,
            
            applyDefaultStyles      :   true        ,

            north: {
                fxName              :   "slide"     ,
                spacing_closed      :   8           ,
                togglerLength_closed:   "100%"      ,
                closable            :   true        ,
                resizable           :   true        ,
                slidable            :   true        ,
                initClosed          :   false       ,
                initHidden          :   false       ,
                size                :   100         ,
                autoResize          :   false

            }    ,
            south: {
                fxName              :   "slide"     ,
                spacing_closed      :   8           ,
                togglerLength_closed:   "100%"      ,
                closable            :   true        ,
                resizable           :   true        ,
                slidable            :   true        ,
                initClosed          :   false       ,
                initHidden          :   false       ,
                size                :   100         ,
                autoResize          :   false 
            }    ,
            east: {
                fxName              :   "slide"     ,
                spacing_closed      :   15          ,
                togglerLength_closed:   "100%"      ,
                closable            :   true        ,
                resizable           :   true        ,
                slidable            :   true        ,
                initClosed          :   false       ,
                initHidden          :   false       ,
                size                :   300         ,
                autoResize          :   false
            }    ,
            center: {
                fxName              :   "slide"     ,
                closable            :   false       ,
                size                :   300
            }
        }
    ) ;
    
    Main_Page_Layout.resizeAll() ;
    
}]) ;

The page appears blank (nothing at all!!!) and the only way to see something is to enter the debug mode in Chrome and change some of the ...location:absolute... into ...location:relative.... When doing that, the layout is still far from what I want, but at least is visible.

Either I am missing something really fundamental in the way UI Layout needs to be used or there is a conflict with AngularJS.