Modularize AngularJS App Using UI-Router - angularjs

Question

I'm trying to modularize a large AngularJS app (1.4.8) that is using UI-Router.
The current structure is like this:
transactionApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('root', {
url: '/transaction',
views: {
'header': {
templateUrl: '/Partials/Shells/Header/header-partial.html',
controller: 'headerController',
resolve: {
headerItems: ['$http', function ($http) {
var data = {};
data["__RequestVerificationToken"] = $('[name=__RequestVerificationToken]').val();
if (dataForLayout.IsLoggedIn) {
return $http({
method: 'POST',
url: '/myaccount/GetHeaderAccountInfo',
data: data
});
}
}]
}
},
'footer': {
templateUrl: '/Partials/Shells/Footer/footer-partial.html',
controller: 'footerController'
},
'mainPanel': {
templateUrl: '/Partials/Shells/Transaction/transaction-partial.html',
controller: 'mainPanelController'
},
'successPanel': {
templateUrl: '/Partials/Shells/Transaction/transaction-success-panel.html',
controller: 'successPanelController'
}
}
});
$urlRouterProvider.otherwise('/transaction');
// Enable HTML5Mode for #-urless
$locationProvider.html5Mode(true);
}]);
The part I want to modularize is "mainPanel." The mainPanel consists of step 1, step 2, step 3, and the final review/submit page. I'd also like to separate pop-up modals if possible/beneficial. The steps, review page, and modals are dependent on each other.
The URL has to stay "/transaction" no matter which step the user is in.
What I'm envisioning is having the parent as "mainPanel" that connects the sub modules and having sub modules that are "step 1," step 2," and so on.
I've read some articles, but can't seem to find one that talks about further modularizing a module.