Multiple nested states AngularJS ui-router

Forgive if this is a silly question, but I am new to AngularJS, and for the life of me I cannot figure out why this nested view setup is not operating as expected.

I have a top-level <div>:

<div class="grid" ui-view></div>

Which has a module populating its view:

angular.module('planttheidea',[
    'ui.router',
    'planttheidea.header',
    'planttheidea.mainContent',
    'planttheidea.footer'
])
    .config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
        $stateProvider
            .state('base',{
                url:'',
                views:{
                    '':{
                        templateUrl:'app/layout.view.html',
                        controller:'LayoutCtrl'
                    }
                }
            });

        $urlRouterProvider.otherwise('/');
    }])
    .controller('LayoutCtrl',function LayoutCtrl($scope,$stateParams){
        var layout = this;
    }); 

I then have the contents of that layout view:

<header ui-view="header" class="header menubar col-p-100" ng-controller="HeaderCtrl"></header>
<main ui-view="main-content" class="main-content grid col-p-100" ng-controller="MainContentCtrl"></main>
<footer ui-view="footer" class="footer col-p-100" ng-controller="FooterCtrl"></footer>

And right now I have the header and footer with their own modules:

angular.module('planttheidea.header',[
    'planttheidea.header.menu'
])
    .config(['$stateProvider','$urlRouterProvider',function($stateProvider){
        $stateProvider
            .state('base.header',{
                url:'',
                views:{
                    'header@base':{
                        templateUrl:'app/components/header/header.view.html',
                        controller:'HeaderCtrl as layoutHeaderCtrl'
                    }
                }
            });
    }])
    .controller('HeaderCtrl',function HeaderCtrl($scope,$stateParams){
        var layoutHeaderCtrl = this;
    });

angular.module('planttheidea.footer',[])
    .config(['$stateProvider','$urlRouterProvider',function($stateProvider){
        $stateProvider
            .state('base.footer',{
                url:'',
                views:{
                    'footer@base':{
                        templateUrl:'app/components/footer/footer.view.html',
                        controller:'FooterCtrl as layoutFooterCtrl'
                    }
                }
            });
    }])
    .controller('FooterCtrl',function FooterCtrl($scope,$stateParams){
        var layoutFooterCtrl = this;
    });

You can see they are nearly identical. The header module is working perfectly (it even has its own nested ui-view for the menu, which works just fine), however the footer code is not routing the ui-view. What's even wackier is that if I copy-and-paste the footer code into the header module (using just the base.header state), it works as desired:

angular.module('planttheidea.header',[
    'planttheidea.header.menu'
])
    .config(['$stateProvider','$urlRouterProvider',function($stateProvider){
        $stateProvider
            .state('base.header',{
                url:'',
                views:{
                    'header@base':{
                        templateUrl:'app/components/header/header.view.html',
                        controller:'HeaderCtrl as layoutHeaderCtrl'
                    },
                    'footer@base':{
                        templateUrl:'app/components/footer/footer.view.html',
                        controller:'FooterCtrl as layoutFooterCtrl'
                    }
                }
            });
    }])
    .controller('HeaderCtrl',function HeaderCtrl($scope,$stateParams){
        var layoutHeaderCtrl = this;
    })
    .controller('FooterCtrl',function FooterCtrl($scope,$stateParams){
        var layoutFooterCtrl = this;
    });

I have validated the code is being loaded correctly (I did a console.log() in the controller of the footer just to make sure it was running at all), so I am thinking it must be the segregation into the two modules. Do I need to declare all the layout views in the same state, or is there a way to break them up into separate modules as I have done here? I must believe its possible because I did so with the nested menu module, however that was nested whereas the footer is in parallel, so I'm worried that may be the issue.

Any assistance would be most appreciated, but do keep in mind I am in the process of learning AngularJS, so while working code would be awesome (obviously), an explanation of why would be even more awesome.