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>
<div ng-controller="MainController">
  <a ui-sref="test" href="#/test">Test</a>
  <a ui-sref="test.a" href="#/test/a">A</a>
  <a ui-sref="test.b" href="#/test/b">B</a><br><br>
  <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.getStuff = function(){
      	console.log("Why does this log when going to B?");
        return "Footer stuff";
      };
});

app.config(['$stateProvider', '$routeProvider',  
    function ($stateProvider, $routeProvider) {
        $stateProvider
          .state('test', {
                url: '/test',
                views: {
                    'header': {
                         template:  '<header>Header</header>'
                    },      
                    'content': {
                         template:  '<div>Default Content</div>'
                    },  
                    'footer': {
                         template:  '<footer>{{getStuff()}}</footer>'
                    }
                }
            })
            .state('test.a', {
                url: '/a',
                views: {                  
                    'content@': {
                         template:  '<div>AAAA Content</div>'
                    }
                }
            })
            .state('test.b', {
                url: '/b',
                views: {
                    'content@': {
                         template:  '<div>BBBB Content</div>'
                    },
                    'footer@': {}
                }
            });
    }])
    .run(['$state', function ($state) {
        $state.transitionTo('test');
    }]);