Is it possible to load different templates with attached controllers in same ui tab without state reload

Question

I have user angular ui-router to create nested states in my application. used abstract states also so that states should not get reloaded.

I use uib-tabs for one section which is child of other states , for one tab i need to render different templates based on button click event like add , edit, view but these actions are defined as different states as different templates and controllers are used for these actions(form pages), it loads parent state templates as well as GET API calls which is not needed, want to load only tab specific templates and controllers only. how can i achieve this or what could be best way to do this as i'm new to angular JS attaching code

// Code goes here

var loginInApp = angular.module('loginInApp', []);
loginInApp.config(function($stateProvider, $urlRouterProvider, $qProvider) {

$urlRouterProvider.otherwise('login');


$stateProvider

    .state('login', {
        url: '/login',
        views: {
           /* 'header': {
                templateUrl: 'header.html'
            },*/
            'login': {
                templateUrl: 'login.html',
                controller: 'LoginController',
             },
            'footer': {
                templateUrl: 'footer.html',
                controller: 'footerController'
            }
        }
     })
      .state('homeContainer', {
         url: '/homeContainer',
         templateUrl: 'homeContent.html',
         controller: 'homeContentController',
         controllerAs: 'homeContentCtrl',
         abstract : true,
         resolve:{              
        //webAPI calls
        }
     })

    .state('homeContainer.home', {
        url: '/home',
        views: {
            'header@homeContainer': {
                templateUrl: 'header.html',
                controller: 'HeaderController',
                controllerAs: 'Header',              
            },
            'folder@homeContainer': {//moved from home.content
                templateUrl: 'folder.html',
                controller: 'FolderController',
                controllerAs: 'Folder'
            },
            'content@homeContainer': {
                templateUrl: 'docAndNoteContent.html'
            },
            'emailSection@homeContainer': {
                templateUrl: 'emailSection.html',
                controller: 'EmailController',
                controllerAs: 'Email'
            },
            'footer@homeContainer': {
                templateUrl: 'footer.html',
                controller: 'footerController'
            }
        },
        abstract : true
    })
    .state('homeContainer.home.content', {
            url: '/content',
            views: {
                'documentAndNoteSection@homeContainer.home': {
                    templateUrl: 'documentAndNoteSection.html',
                    controller: 'documentAndNoteSectionController',
                    controllerAs: 'DocumentAndNotes'
                },
                'inbox@homeContainer.home': {
                    templateUrl: 'inbox.tpl.html',
                    controller: 'inboxController',
                    controllerAs: 'inbox'
                },
                'outbox@homeContainer.home': {
                    templateUrl: 'outbox.tpl.html',
                    controller: 'outboxController',
                    controllerAs: 'outbox'
                },
                'contacts@homeContainer.home': {
                    templateUrl: 'contacts.tpl.html',
                    controller: 'ContactController',
                    controllerAs: 'Contact'
                },
                'composeMail@homeContainer.home': {
                    templateUrl: 'composeMail.tpl.html',
                    controller: 'composeMailController',
                    controllerAs: 'composeMail'
                },
                'historyLog@homeContainer.home': {
                    templateUrl: 'historyLog.tpl.html',
                    controller: 'historyLogController',
                    controllerAs: 'historyLog'
                },
                'sharedItems@homeContainer.home': {
                    templateUrl: 'sharedItems.tpl.html',
                    controller: 'sharedItemsController',
                    controllerAs: 'sharedItems'
                }
            }
            abstract : true
    })
    .state('homeContainer.home.content.baseHomeState', { 
            url: '/baseHomeState',
            views: {
                'document@homeContainer.home.content': {
                    templateUrl: 'document.html',
                    controller: 'DocumentController'
                },
                'notes@homeContainer.home.content': {
                    templateUrl: 'note.html',
                    controller: 'NoteController',
                    controllerAs: 'Note'
                }
            }
    })
    .state('homeContainer.home.content.baseHomeState.addContact', { 
        url: '/addContact',
        views: {
            'contacts@homeContainer.home': {
                templateUrl: 'addContact.html',
                controller: 'AddContactController',
                controllerAs: 'AddContact'
             }
        }
    })

    .state('homeContainer.home.content.baseHomeState.editContact', { 
        url: '/editContact',
        views: {
            'contacts@homeContainer.home': {
                templateUrl: 'editContact.html',
                controller: 'EditContactController',
                controllerAs: 'EditContact'
            }
        }
    });

Answer 1

it is resolved UI-Router Reload State without a full page refresh $state.go(parentstatename, {}, {reload: "child state name"}); after reloading child state it doesnot reload parent put child state name in reload