Would Multiple Views Like This Work In My Abstract View

as the title says will this work in my index,html file code as follows

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
	<script src="js/custom.js"></script>
  </head>
  <body ng-app="starter" ng-controller="mainCtrl">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
	  
      <ion-content>
		<ion-nav-view name="homePageContent" class="has-header" ></ion-nav-view>
		<ion-nav-view name="addExpenseContent" class="has-header"></ion-nav-view>
		<ion-nav-view name="addIncomeContent" class="has-header"></ion-nav-view>
		<ion-nav-view name="editExpenseContent" class="has-header"></ion-nav-view>
      </ion-content>
	  
    </ion-pane>
  </body>
</html>

and my views are defined in their own separate files, my app.js file code is as follows

var app = angular.module('starter', ['ionic', 'ngAnimate'])

.config(function($stateProvider, $urlRouterProvider){
	//$locationProvider.html5Mode(true);
	
	$stateProvider
	
	.state('abs', {
    url: '/index',
    abstract: true,
	//template: '<ion-nav-view cache-view="false">',
    //template: '<ui-view/>',
	templateUrl: 'index.html',
	controller: 'mainCtrl'
	})
	
	.state('abs.home', {
    url: '/homePage',	
    views: {
      'homePageContent': {
        templateUrl: 'homePage.html',
        controller: 'homePageCtrl'
      }
    }
  })
  
  	.state('abs.addExpense', {
    url: '/addExpense',
    views: {
      'addExpenseContent': {
        templateUrl: 'addExpense.html',
        controller: 'addExpenseCtrl'
      }
    }
  })
  
  	.state('abs.addIncome', {
    url: '/addIncome',
    views: {
      'addIncomeContent': {
        templateUrl: 'addIncome.html',
        controller: 'addIncomeCtrl'
      }
    }
  })
  
  	.state('abs.editExpense', {
    url: '/editExpense/:expenseID/:expenseDate/:expenseDetail/:expenseAmount',
    views: {
      'editExpenseContent': {
        templateUrl: 'editExpense.html',
        controller: 'editExpenseCtrl'
      }
    }
  });
  
  $urlRouterProvider.otherwise('/homePage');
  
})

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

but my view are still not showing up

Something like this is not suggested.

There really shouldn’t be this many ion-nav-views in an app.

@mhartington why not? and what do you suggest

Because, which nav-view is in change and gets rendered? Also, which nav-view dictates history?

Something like this, you want to use tabs

okay wouldn’t the default nav be the default in the routes? Please elaborate on what you mean by which tab dictates history?