An example of using AngularUI router with nested views with a resolve

angular-ui-router-nested-views.js

<script>
  angular.module('main', ['ui.router'])
    .config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
      .state('home', {
          url: '/home',
          resolve: {
              filterData: function(){
                  return [1, 2, 3, 4, 5, 6]
              },
              tableData: function(){
                  return {
                      foo: 'FOO',
                      bar: 'BAR'
                  }
              },
              graphData: function(){
                  return {
                      color: 'Red',
                      numDoors: 4
                  }
              }
          },
          views: {
              main: {
                  templateUrl: 'main.html',
                  controller: function($scope){
                      
                  }
              },
              'filters@home': {
                  templateUrl: 'filters.html',
                  controller: function($scope, filterData) {
                      console.log('Filter data: ', filterData);
                  }
              },
              'tabledata@home': {
                  templateUrl: 'tabledata.html',
                  controller: function($scope, tableData) {
                      console.log('Table data: ', tableData);
                  }
              },
              'graph@home': {
                  templateUrl: 'graph.html',
                  controller: function($scope, graphData) {
                      console.log('Graph data: ', graphData);
                  }
              }
          }
      })
    });
  </script>