Angular.js App with routing.. Cannot get jquery ui layout plugin working on 2nd view

You were on the right track. You were loading the layout via a directive, but since it was in another module (mydirectives) you need to include that module in your app.

I simplified that in the example. Now when you browse to alt you can see in the source that the JQuery UI is loading (all the sections as getting the expected styling).

For some reason the layout isn't perfect, I had to add this CSS to give it some height. I'll let you fiddle with that to get it how you like it:

.ui-layout-container{
    height: 500px;
}

Here is the app.js http://plnkr.co/edit/peQTwhWFGWvulDZNeeqn?p=preview

var myApp = angular.module('myApp', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/home', {templateUrl: 'hello.html',   controller: homeCtrl}).
      when('/alt', {templateUrl: 'alt.html', controller: altCtrl}).
      otherwise({redirectTo: '/home'});
}]);

function homeCtrl($scope, $http) {
    console.log("homeCtrl");
}
function altCtrl($scope, $http) {
    console.log('altCtrl');
}



myApp.directive('layout', function() {
    return {        
        restrict: 'A',
        link: function(scope, elm, attrs) { 
          console.log("applying layout");
            elm.layout({ applyDefaultStyles: true });
        }
    };
});