I have a basic hello world setup for a header/container/footer in AngularJs however I can't get the footer to load. The header/container is loading fine.

Here's my javascript:

angular.module('app', ['app.controllers', 'ui.router']).config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('root', {
            url: '',
            abstract: true,
            views: {
                'header': {
                    templateUrl: 'pages/header/header.html',
                    controller: 'HeaderController'
                },
                'footer': {
                    templateurl: 'pages/footer/footer.html'
                }
            }
        })
        .state('root.home', {
            url: '/',
            views: {
                'container@': {
                    templateUrl: 'pages/home/home.html',
                    controller: 'HomeController'
                }
            }
        })
        .state('root.about', {
            url: '/about',
            views: {
                'container@': {
                    templateUrl: 'pages/about/about.html'
                }
            }
        });

    $urlRouterProvider.otherwise('/');
});

angular.module('app.controllers', [])
    .controller('HeaderController', headerController)
    .controller('HomeController', homeController);

Here's my implementation on HTML:

<header ui-view="header">
</header>

<div ui-view="container">
</div>

<footer ui-view="footer">
</footer>

Changing them all to divs does not help.

There are no errors in Javascript console.

Header.html

<h1>Header</h1>

Home.html

<h1>Home</h1>

Footer.html

<h1>Footer</h1>

Page display:

Header

Home