Unfortunately, I am not well-versed in Angular. My objective is to display multiple views on a user profile page using ui-router. These are my current routes:

(function() {
'use strict';

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

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

    // Enable HTML5 Mode
    $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 structure.
• app.home is the landing page with all users.
• app.user should display a user's profile page with two tables (eventTable, bankStatement) rendered through two views.

I am unsure if the app.user.dashboard state is necessary, but I am unsure how to render the views inside the app.user state. Here is the rest of the pertinent 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 assistance would be highly appreciated. Thank you!