Angularjs UI-Router Nested Views Don't Want to Reload TreeView

[CodingInfinite]

I'm using Angularjs UI-Router with my DotNet Core Application. Although I'm using complex nested views routing but everything is working fine.

I have divided my page into two parts, the left one is for treeview and the right one is for forms related to treeview menu. The right side again has nested views in the form of tabs but my problem is with treview. What I want is when I click on any menu option in the Treeview then only the right side part should be changed tree view should not be reloaded.

I just want not to reload my left side (Tree)

Here's my router code

    var app = angular.module('MyApp', ['ui.router']);

    app.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider

        // loading page having tree on left side and content on the right side...
        .state('NetworkDistribution', {
            url: "/NetworkDistribution/{id}",
            views: {
                'container-view': {
                    templateUrl:"NetworkArchive/_Index"
                },
                'left-view@NetworkDistribution' :{
                    templateUrl:"NetworkArchive/_TreeView"
                },
                'right-view@NetworkDistribution' :{
                    templateUrl: function(stateParams) {
                        return '/NetworkArchive/GridList/' + stateParams.id;
                    }
                }
            }
        })

        // loading content on the right side when click on the option from the Tree(Left Side TreeView)...
        .state('NetworkDistribution.Grid', {
            url: "Grid/{id}",
            views: {
                'container-view': {
                    templateUrl:"NetworkArchive/_Index"
                },
                'left-view@NetworkDistribution' :{
                    templateUrl:"NetworkArchive/_TreeView"
                },
                'right-view@NetworkDistribution' :{
                    templateUrl: function(stateParams) {
                        return "NetworkArchive/Grid/" + stateParams.id;
                    }
                },
                'content-view@NetworkDistribution.Grid' :{
                    templateUrl: function(stateParams) {
                        return "NetworkArchive/GridInfo/" + stateParams.id;
                    }
                }
            }

        })

I just don't want TreeView to reload when state => NetworkDistribution.Grid clicked.
Please Provide me simplest solution.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

This does not mean that the issue is invalid. Valid issues may be reopened.

Thank you for your contributions.