angularjs ui-route: change only 1 nested view and save other views from reloading

Question

dummy project download link`

--mainview
--mainview/about
--mainview/about/leftcontainer
--mainview/about/rightcontainer

Problem

I have a button on about change right side column that changes the view of rightcontainer ui-view but it also refreshes the left-hand side ui-view.

Elaboration

When you will run the project provided above. The first page you will see is

Please make some clicks on the buttons provided (as below)

then click on change right side column

It will refresh the count of left-hand side column.

Please help me to change only a specific view instead of all its siblings

route code

stateProvider
.state('about', {
    url: '/about',
    views: {
        // the main template will be placed here (relatively named)
        '': {
            templateUrl: 'partial-about.html',
            controller: function ($scope) {
                $scope.count = 1;
                $scope.countPlus = function () {
                    $scope.count++;
                }
            }
        },

        // the child views will be defined here (absolutely named)
        'columnOne@about': {
            template: 'Look I am a column! <br> press count    <input type="button" ng-click="countPlus()" value="count++" /> {{count}}',
            controller: function ($scope) {
                $scope.count = 1;
                $scope.countPlus = function () {
                    $scope.count++;
                }
            }
        },

        // for column two, we'll define a separate controller 
        'columnTwo@about': {
            templateUrl: 'table-data.html',
            controller: 'scotchController'
        }
    }

})

.state('about.changeRightSideColumn', {
    url: '/changeRightSideColumn',
    views: {
        // the main template will be placed here (relatively named)
       // the child views will be defined here (absolutely named)
        'columnOne@about': {
            template: 'Look I am a column! <br> press count    <input type="button" ng-click="countPlus()" value="count++" /> {{count}}',
            controller: function ($scope) {
                $scope.count = 1;
                $scope.countPlus = function () {
                    $scope.count++;
                }
            }
        },

        // for column two, we'll define a separate controller 
        'columnTwo@about': {
            templateUrl: 'right-side-column.html'
        }
    }

})

Answer 1

This happens because you change both the columns in right column handling. If you change the app.js code as follows it will work as you expect.

Your Code:

.state('about.changeRightSideColumn', {
        url: '/changeRightSideColumn',
        views: {
            // the main template will be placed here (relatively named)
           // the child views will be defined here (absolutely named)
            'columnOne@about': {
                template: 'Look I am a column! <br> press count    <input type="button" ng-click="countPlus()" value="count++" /> {{count}}',
                controller: function ($scope) {
                    $scope.count = 1;
                    $scope.countPlus = function () {
                        $scope.count++;
                    }
                }
            },

            // for column two, we'll define a separate controller 
            'columnTwo@about': {
                templateUrl: 'right-side-column.html'
            }
        }

    }

Solution:

.state('about.changeRightSideColumn', {
        url: '/changeRightSideColumn',
        views: {
            // for column two, we'll define a separate controller 
            'columnTwo@about': {
                templateUrl: 'right-side-column.html'
            }
        }
    }

Hope this will help you.