Angular uiRouter reloads each components in the template

Question

I'm using UIRouter in order to define my app routes and views.

Now what is going wrong is that each time I go to a route, UIRouter reloads every view defined in the "ongoing" route rule, even those which aren't changed from the old route. This cause controllers reset and piss me off. I don't want to code those views in my general template, and I would avoid to use manual <ng-include ng-if="blah">, so is there any other solution?

Here is my route config. As you can see both routes have the very same views. Please keep in mind that left, center and right views are placed inside the home.html, which is assigned to the "home" rule.

$stateProvider
    .state('home', {
      templateUrl: 'app/components/templates/home.html',
      abstract: true,
      views: {
          'header': {
              templateUrl: 'app/components/header/headerView.html'
          },
          '': {
              templateUrl: 'app/components/templates/home.html'
          }
      }
    })
  .state('home.twitter', {
        url: '/home/twitter',
        views:{
            'left': {
                templateUrl : 'app/components/accountList/accountListView.html'
            },
            'center': {
                templateUrl : 'app/components/timeline/timelineView.html'
            },
            'right': {
                templateUrl : 'app/components/accountWallet/accountWalletView.html'
            }
        }
    })
      .state('home.link', {
        url: '/home/link',
        views:{
            'left': {
                templateUrl : 'app/components/accountList/accountListView.html'
            },
            'center': {
                templateUrl : 'app/components/timeline/timelineView.html'
            },
            'right': {
                templateUrl : 'app/components/accountWallet/accountWalletView.html'
            }
        }
    });

Answer 1

Assuming that left and right are only shared between these 2 states and can be different for other children of home, you need another abstract layer to keep them separate from the center view:

  $stateProvider
  .state('home', {
    url: '/home'
    templateUrl: 'app/components/templates/home.html',
    abstract: true,
    views: {
        'header': {
            templateUrl: 'app/components/header/headerView.html'
        },
        '': {
            templateUrl: 'app/components/templates/home.html'
        }
    }
  })
  .state('home.account', {
    url: '',
    abstract: true,
    views:{
        'left': {
            templateUrl : 'app/components/accountList/accountListView.html'
        },
        'center': {
            templateUrl : '<ui-view/>'
        },
        'right': {
            templateUrl : 'app/components/accountWallet/accountWalletView.html'
        }
    }
  })
  .state('home.account.twitter', {
    url: '/twitter',
    views:{
        'center': {
            templateUrl : 'app/components/timeline/timelineView.html'
        }
    }
  })
  .state('home.account.link', {
    url: '/link',
    views:{
        'center': {
            templateUrl : 'app/components/timeline/timelineView.html'
        }
    }
  });

When you go from home.account.twitter to home.account.link, the left and right views should stay the same. That said, it would obviously be better if you could actually integrate the left and right views into the parent abstract state instead of having a separate state just for them.