How to use nested view objects with ui-router (angular)

I apologize in advance, I am not an angular expert. I am trying to render a series of views on a user profile page using ui-router. Here are my routes currently:

(function() {
'use strict';

angular
    .module('app.routes')
    .config(routesConfig);

routesConfig.$inject = ['$stateProvider', '$locationProvider', '$urlRouterProvider', 'RouteHelpersProvider'];
function routesConfig($stateProvider, $locationProvider, $urlRouterProvider, helper){

    // Set the following to true to enable the HTML5 Mode
    // You may have to set <base> tag in index and a routing configuration in your server
    $locationProvider.html5Mode(false);

    // defaults to dashboard
    $urlRouterProvider.otherwise('/app/home');

    // 
    // Application Routes
    // -----------------------------------   
    $stateProvider
      .state('app', {
          url: '/app',
          abstract: true,
          templateUrl: helper.basepath('app.html'),
          resolve: helper.resolveFor('fastclick', 'modernizr', 'icons', 'screenfull', 'animo', 'sparklines', 'slimscroll', 'classyloader', 'toaster', 'whirl','loaders.css', 'spinkit','jquery-ui', 'jquery-ui-widgets','weather-icons', 'skycons')
      })
      .state('app.home', {
          url: '/home',
          title: 'Home',
          templateUrl: helper.basepath('home.html'),
      })
      .state('app.user', {
          url: '/user',
          title: 'User',
          templateUrl: helper.basepath('user.html'),
          resolve: helper.resolveFor('datatables')
      })
      .state('app.user.dashboard', {
          url: '',
          views: {
            'eventTable': {
              templateUrl: helper.basepath('eventTable.html'),
            },
            'bankStatement': {
              templateUrl: helper.basepath('bankStatement.html'),
            }
          }
      })
} // routesConfig

})();

• app provides the general layout.
• app.home is the homepage with all users.
• app.user should be a user profile page with two tables (eventTable, bankStatement)rendered through two views.

I'm not sure that the extra app.user.dashboard state is needed but I'm not sure how to get the views to render inside the app.user state. Here is the rest of the relevant code:

user.html

<h3>User Profile</h3>
<div ui-view="eventTable"></div>
<div ui-view="bankStatement"></div>

bankStatement.html

<div class="panel panel-default">
   <div id="bankStatementHeader" class="panel-heading">Events</div>
   <div class="panel-body">
      <div ng-controller="EventTableController as table2">
         <table datatable="ng" class="row-border hover">
            <thead>
               <tr>
                  <th>Date</th>
                  <th>Type</th>
                  <th>Description</th>
               </tr>
            </thead>
            <tbody>
               <tr ng-repeat="event in table2.events">
                  <td>{{ event.date }}</td>
                  <td>{{ event.type }}</td>
                  <td>{{ event.description }}</td>
               </tr>
            </tbody>
         </table>
      </div>
   </div>
</div>

eventTable.html

<div class="panel panel-default">
   <div id="bankStatementHeader" class="panel-heading">Bank Statement</div>
   <div class="panel-body">
      <div ng-controller="BankStatementController as table1">
         <table datatable="ng" class="row-border hover">
            <thead>
               <tr>
                  <th>Person ID</th>
                  <th>Event Date</th>
                  <th>Process Date</th>
                  <th>Details</th>
                  <th>Description</th>
                  <th>Amount</th>
                  <th>Balance</th>
               </tr>
            </thead>
            <tbody>
               <tr ng-repeat="statement in table1.statements">
                  <td>{{ statement.id }}</td>
                  <td>{{ statement.eventDate }}</td>
                  <td>{{ statement.processDate }}</td>
                  <td>{{ statement.details }}</td>
                  <td>{{ statement.description }}</td>
                  <td>{{ statement.amount }}</td>
                  <td>{{ statement.balance }}</td>
               </tr>
            </tbody>
         </table>
      </div>
   </div>
</div>

eventTable controller

function() {
    'use strict';

    angular
        .module('app.eventTable')
        .controller('EventTableController', EventTableController);

    EventTableController.$inject = ['$resource', 'DTOptionsBuilder', 'DTColumnDefBuilder'];
    function EventTableController($resource, DTOptionsBuilder, DTColumnDefBuilder) {
        var vm = this;

        activate();

        ////////////////

        function activate() {

          // Ajax

          $resource('server/event-table.json').query().$promise.then(function(events) {
             vm.events = events;
          });
        }
    }
})();

bankStatements controller

(function() {
    'use strict';

    angular
        .module('app.bankStatement')
        .controller('BankStatementController', BankStatementController);

    BankStatementController.$inject = ['$resource', 'DTOptionsBuilder', 'DTColumnDefBuilder'];
    function BankStatementController($resource, DTOptionsBuilder, DTColumnDefBuilder) {
        var vm = this;
        activate();

        ////////////////

        function activate() {

          // Ajax

          $resource('server/bank-statement.json').query().$promise.then(function(statements) {
             vm.statements = statements;

          });
        }
    }
})();

Any help would be greatly appreciated. Thanks