AngularJS ui-router Nested Named Views

by rsmclaug

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.0.1/angular-ui-router.min.js"></script>
<a ui-sref="test" href="#/test">test</a>
<a ui-sref="something" href="#/something">something</a><br><br>
  
<div ng-controller="MainController">
  <div ui-view="header"></div>
  <div ui-view="content"></div>
  <div ui-view="footer"></div>
</div>

JavaScript

var app = angular.module('myApp', ['ui.state']);

app.controller('MainController', function($scope){    
	$scope.garbage = 1;

  $scope.getStuff = function(){
  	$scope.garbage++;
    console.log("garbage", $scope.garbage);
  };
});

app.config(['$stateProvider', '$routeProvider',  
    function ($stateProvider, $routeProvider) {
        $stateProvider
          .state('test', {
                url: '/test',
                views: {
                    'header': {
                         template:  '<header>Test Header</header>'
                    },      
                    'content': {
                         template:  '<div>Test Content</div>'
                    },  
                    'footer': {
                         template:  '<footer>Test Footer {{getStuff()}}</footer>'
                    }
                }
            })
           .state('something', {
                url: '/something',
                views: {
                  	'header': {
                         template:  '<header>Something Header</header>'
                    },  
                    'content': {
                         template:  '<div>Something Content</div>'
                    },
                    'footer': {
                         template:  '<footer>Something Footer </footer>'
                    }
                }
            });

    }])
    .run(['$state', function ($state) {
        $state.transitionTo('test');
    }]);