Angular UI-Router How to create a “layout” state?

try this, practically your header and footer are static templates but you can add the controllers in case you need to add some dynamic functionality to it, the header and the footer will be included by default since the route is ”, so try that out:

 app.config(['$stateProvider', function($stateProvider){
        $stateProvider
        .state('root',{
          url: '',
          abstract: true,
          views: {
            'header': {
              templateUrl: 'header.html',
              controller: 'HeaderCtrl'
            },
            'footer':{
              templateUrl: 'footer.html',
              controller: 'FooterCtrl'
            }
          }
        })
        .state('root.home', {
          url: "https://stackoverflow.com/",
          views: {
            'container@': {
              templateUrl: 'homePage.html'
            }
          }
        })
        .state('root.other', {
          url: '/other',
          views: {
            'container@': {
              templateUrl: 'other.html'
            }
          }
        });    

    }]);

Edit:
to me the best place to set the views should be in the index.html
and something like this code:

<header>
    <div ui-view="header"></div>
</header>
<div ui-view="container">
</div>
<footer id="mainFooter" ui-view="footer">
</footer>