named views content swapping

1.routes.js

(function() {

    'use strict';

    angular.module('app.flipbook').config(config);

    config.$inject = ['$stateProvider'];
    /* @ngInject */
    function config($stateProvider) {
        $stateProvider
            .state('flipbook', {
                url: '/flipbook/:url',
//                params: {url:null},
                views: {
                    'header@': {
                        templateUrl: 'app/flipbook/flipbook.header.html',
                        controller: 'Main',
                        controllerAs: 'main'
                    },
                    'content@': {
                        templateUrl: 'app/flipbook/flipbook.html',
                        controller: 'Flipbook',
                        controllerAs: 'fb'
                    }
                },
                resolve: {
                    validate: ['$state', '$rootScope', '$stateParams', function($state, $rootScope, $stateParams) {
                        if ($rootScope.previousStateParams && $rootScope.previousStateParams.url) {
                          // Can't remember why I did this but it broke something so I'm taking it out for now
//                            $stateParams.url = $rootScope.previousStateParams.url;
                            return true;
                        }
                        if ($stateParams.url === null || !$rootScope.previousStateParams) {
                            $state.go('main');
                        }
                    }]
                }

            });
    }

})();

2.routes.js

(function() {

    'use strict';

    angular.module('app.layout').config(config);

    config.$inject = ['$stateProvider'];
    /* @ngInject */
    function config($stateProvider) {
        $stateProvider
            .state('about', {
                url: '/about',
                views: {
                    'header@': {
                        templateUrl: 'app/about/header.html',
                        controller: 'Main',
                        controllerAs: 'main'
                    },
                    'content@': {
                        templateUrl: 'app/about/about.html',
                        controller: 'About',
                        controllerAs: 'about'
                    },
                    'footer@': {
                        templateUrl: 'app/layout/footer.html',
                        controller: 'Main',
                        controllerAs: 'main'
                    }
                }
            });
    }

})();

3.routes.js

(function() {

    'use strict';

    angular.module('app.admin').config(config);

    config.$inject = ['$stateProvider'];
    /* @ngInject */
    function config($stateProvider) {

        $stateProvider
            .state('admin', {
                url: '/admin',
                views: {
                    'header@': {
                        templateUrl: 'app/admin/header.html',
                        controller: 'Admin',
                        controllerAs: 'admin'
                    },
                    'footer@': {
                        templateUrl: 'app/layout/footer.html',
                        controller: 'Main',
                        controllerAs: 'main'
                    },
                    'content@' : {
                        templateUrl: 'app/admin/admin.html',
                        controller: 'Admin',
                        controllerAs: 'admin'
                    }
                },
                resolve: {
                    validate: ['JWT', '$state', function(JWT, $state) {
                        var authenticated;
                        return JWT.getToken().then(function(res) {
                            authenticated = res;
                            if (!authenticated) {
                                $state.go('login');
                            }
                        });
                    }]
                }
            })
            .state('admin.categories', {
                url: '/categories',
                views: {
                    'header@': {
                        templateUrl: 'app/admin/header.html',
                        controller: 'Admin',
                        controllerAs: 'admin'
                    },
                    'footer@': {
                        templateUrl: 'app/layout/footer.html',
                        controller: 'Main',
                        controllerAs: 'main'
                    },
                    'content@' : {
                        templateUrl: 'app/admin/categories.html',
                        controller: 'CategoriesAdmin',
                        controllerAs: 'cat'
                    }
                }
            })
            .state('admin.markets', {
                url: '/markets',
                views: {
                    'header@': {
                        templateUrl: 'app/admin/header.html',
                        controller: 'Admin',
                        controllerAs: 'admin'
                    },
                    'footer@': {
                        templateUrl: 'app/layout/footer.html',
                        controller: 'Main',
                        controllerAs: 'main'
                    },
                    'content@' : {
                        templateUrl: 'app/admin/markets.html',
                        controller: 'MarketsAdmin',
                        controllerAs: 'market'
                    }
                }
            })
            .state('admin.pubs', {
                url: '/publications',
                views: {
                    'header@': {
                        templateUrl: 'app/admin/header.html',
                        controller: 'Admin',
                        controllerAs: 'admin'
                    },
                    'footer@': {
                        templateUrl: 'app/layout/footer.html',
                        controller: 'Main',
                        controllerAs: 'main'
                    },
                    'content@' : {
                        templateUrl: 'app/admin/publications.html',
                        controller: 'PublicationsAdmin',
                        controllerAs: 'pub'
                    }
                }
            });
    }
})();

app.config.js

(function() {

    'use strict';
    /* global _: false */
    angular.module('app', [
        /* Shared modules */
        'app.core',

        /* Feature areas */
        'app.layout',
        'app.home',
        'app.markets',
        'app.categories',
        'app.rack',
        'app.flipbook',
        'app.admin'
    ])
        .config(config)
        .run(run);


    config.$inject = ['$stateProvider', '$httpProvider', '$tooltipProvider', '$urlRouterProvider', '$animateProvider', 'AnalyticsProvider'];
    /* @ngInject */
    function config($stateProvider, $httpProvider, $tooltipProvider, $urlRouterProvider, $animateProvider, AnalyticsProvider) {

        // Google Analytics Settings
        AnalyticsProvider.setAccount('UA-63898389-1');
        AnalyticsProvider.useAnalytics(true);
        AnalyticsProvider.trackPages(true);
        AnalyticsProvider.setPageEvent('$stateChangeSuccess');

        // fixes an issue with ngAnimate and ui.bootstrap carousel
        // https://github.com/angular-ui/bootstrap/issues/1565
        $animateProvider.classNameFilter(/carousel/);

        delete $httpProvider.defaults.headers.common['X-Requested-With'];
        $httpProvider.interceptors.push('AuthInterceptor');



        $stateProvider
            .state('main', {
                url: '',
                views : {
                    'header': {
                        templateUrl: 'app/layout/header.html',
                        controller: 'Main',
                        controllerAs: 'main'
                    },
                    'footer': {
                        templateUrl: 'app/layout/footer.html',
                        controller: 'Main',
                        controllerAs: 'main'
                    },
                    'featured': {
                        templateUrl: 'app/featuredmag/featuredmag.html',
                        controller: 'FeaturedMag',
                        controllerAs: 'mag'
                    },
                    'categories':  {
                        templateUrl: 'app/categories/categories.html',
                        controller: 'Categories',
                        controllerAs: 'cat'
                    },
                    'rack': {
                        templateUrl: 'app/rack/rack.html',
                        controller: 'Rack',
                        controllerAs: 'rack'
                    }
                },
                resolve: {
                    validate: ['DataService', '$state', '$rootScope', function(DataService, $state, $rootScope) {
                        if (!$rootScope.previousStateName) {
                            DataService.GetMarkets().then(function(res) {
                                var defaultMarket = _.find(res, {code: 'magzville'});
                                $state.go('main.market', {market: defaultMarket.code});
                            });
                        }
                        else if ($rootScope.previousStateParams.market) {
                            $state.go('main.market', {market: $rootScope.previousStateParams.market});
                        }
                    }]
                }
            });

        $urlRouterProvider.otherwise('');
        $tooltipProvider.options({appendToBody: true});
    }

    run.$inject = ['$rootScope', '$state', '$stateParams', 'PreviousState', 'HomeState', 'Analytics'];
    /* @ngInject */
    function run($rootScope, $state, $stateParams, PreviousState, HomeState, Analytics) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
        $rootScope.$on('$stateChangeSuccess',  function(event, toState, toParams, fromState, fromParams) {
            // to be used for back button //won't work when page is reloaded.
            $rootScope.previousStateName = fromState.name;
            $rootScope.previousStateParams = fromParams;
            HomeState.SaveState(fromState, fromParams)
        });
        //back button function called from back button's ng-click="back()"
        $rootScope.back = function() {
          $state.go($rootScope.previousStateName, $rootScope.previousStateParams);
        };
        $rootScope.home = function(homeState) {
          var goState;
          if(homeState) {
            goState = {market: homeState};
            $state.go('main.market', goState);
          } else {
            goState = HomeState.GetState();
            $state.go('main.market', goState.params);
          }
        };
    }

})();

index.html

<!DOCTYPE html>
<html ng-app="app" g-strict-di>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title ng-bind="title"></title>
    <base href="">
    <style>
        /* This helps the ng-show/ng-hide animations start at the right place. */
        /* Since Angular has this but needs to load, this gives us the class early. */
        .ng-hide { display: none!important; }
    </style>

    <!-- build:css css/lib.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="/bower_components/webfont-opensans/css/stylesheet.css" />
    <link rel="stylesheet" href="/bower_components/angular-toastr/dist/angular-toastr.css" />
    <link rel="stylesheet" href="/bower_components/angular-aside/dist/css/angular-aside.css" />
    <link rel="stylesheet" href="/bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css" />
    <link rel="stylesheet" href="/bower_components/angular-xeditable/dist/css/xeditable.css" />
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css css/app.css -->
    <!-- inject:css -->

    <link rel="stylesheet" href="/src/client/styles/style.css">

    <link rel="stylesheet" href="/src/client/app/admin/admin.css">

    <!-- endinject -->
    <!-- endbuild -->


</head>
<body>


<!--<div ng-include="'app/layout/header.html'"></div>-->

<div class="page-wrapper">
    <div class="col-md-12 col-sm-12 no-side-pad" ui-view="header"></div>

    <div class="col-md-12 col-sm-12 content" ui-view="content">

        <div class="bg clearfix">
            <div ui-view="categories"></div>

            <div class="col-md-6 col-md-offset-1 col-sm-12" ui-view="featured"></div>

            <div class="col-md-4 col-sm-12" ui-view="rack"></div>
        </div>

    </div>
</div>

<div ui-view="footer"></div>

<!--<div ng-include="'app/layout/footer.html'"></div>-->




<!-- build:js js/lib.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="/bower_components/lodash/dist/lodash.compat.js"></script>
<script src="/bower_components/restangular/dist/restangular.js"></script>
<script src="/bower_components/angular-ui-bootstrap-bower/ui-bootstrap-tpls.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="/bower_components/angular-toastr/dist/angular-toastr.tpls.js"></script>
<script src="/bower_components/ngstorage/ngStorage.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="/bower_components/angular-messages/angular-messages.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="/bower_components/angular-aside/dist/js/angular-aside.js"></script>
<script src="/bower_components/angular-touch/angular-touch.js"></script>
<script src="/bower_components/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="/bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js"></script>
<script src="/bower_components/angular-xeditable/dist/js/xeditable.js"></script>
<script src="/bower_components/angular-truncate/src/truncate.js"></script>
<script src="/bower_components/angular-google-analytics/dist/angular-google-analytics.min.js"></script>
<!-- endbower -->
<!-- endbuild -->



<!-- build:js js/app.js -->
<!-- inject:js -->



<script src="/src/client/app/app.module.js"></script>



<script src="/src/client/app/admin/admin.module.js"></script>



<script src="/src/client/app/categories/categories.module.js"></script>



<script src="/src/client/app/featuredmag/featuredmag.module.js"></script>



<script src="/src/client/app/flipbook/flipbook.module.js"></script>



<script src="/src/client/app/core/core.module.js"></script>



<script src="/src/client/app/layout/layout.module.js"></script>



<script src="/src/client/app/home/home.module.js"></script>



<script src="/src/client/app/markets/markets.module.js"></script>



<script src="/src/client/app/rack/rack.module.js"></script>



<script src="/src/client/app/admin/login/login.module.js"></script>



<script src="/src/client/app/common/inline-edit/inline-edit.module.js"></script>



<script src="/src/client/app/common/loader/loader.module.js"></script>



<script src="/src/client/app/about/about.js"></script>



<script src="/src/client/app/about/about.routes.js"></script>



<script src="/src/client/app/admin/admin.js"></script>



<script src="/src/client/app/admin/admin.routes.js"></script>



<script src="/src/client/app/admin/categories.admin.js"></script>



<script src="/src/client/app/admin/duplicate.name.validator.js"></script>



<script src="/src/client/app/admin/markets.admin.js"></script>



<script src="/src/client/app/admin/publications.admin.js"></script>



<script src="/src/client/app/categories/categories.js"></script>



<script src="/src/client/app/categories/categories.modal.js"></script>



<script src="/src/client/app/featuredmag/featuredmag.js"></script>



<script src="/src/client/app/flipbook/flipbook.js"></script>



<script src="/src/client/app/flipbook/flipbook.routes.js"></script>



<script src="/src/client/app/core/AppConfig.js"></script>



<script src="/src/client/app/core/AuthInterceptor.js"></script>



<script src="/src/client/app/core/JWT.js"></script>



<script src="/src/client/app/core/api.config.js"></script>



<script src="/src/client/app/core/dataservice.js"></script>



<script src="/src/client/app/core/homeState.service.js"></script>



<script src="/src/client/app/core/input-autofocus.js"></script>



<script src="/src/client/app/core/previousState.service.js"></script>



<script src="/src/client/app/layout/MainCtrl.js"></script>



<script src="/src/client/app/home/home.js"></script>



<script src="/src/client/app/markets/markets.js"></script>



<script src="/src/client/app/markets/markets.routes.js"></script>



<script src="/src/client/app/rack/rack.js"></script>



<script src="/src/client/app/rack/rack.routes.js"></script>



<script src="/src/client/app/rack/rack.scroller.js"></script>



<script src="/src/client/app/admin/login/login.js"></script>



<script src="/src/client/app/admin/login/login.route.js"></script>



<script src="/src/client/app/admin/login/login.service.js"></script>



<script src="/src/client/app/common/googleAnalytics/googleAnalytics.directive.js"></script>



<script src="/src/client/app/common/inline-edit/inline-edit.js"></script>



<script src="/src/client/app/common/loader/loader.js"></script>



<!-- endinject -->

<!-- inject:templates:js -->
<!-- endinject -->

<!-- endbuild -->


</body>
</html>