Using UI-Router - Is it possible to set only singl

Question

In one of my templates , I have this code :

<h1>Route 1</h1>
<hr/>
<a ui-sref=".list">Show List</a>
<a ui-sref=".thing">thing7</a>

<div ui-view="left"></div>
<div ui-view="right"></div>

When I click the .list state - I do have a controller with the appropriate configuration :

....state('route1.list',
{
    url: '/list',
    views:
    {

        'left@route1':
        {
            templateUrl: 'route1.list.html',
            controllerAs: "vm",
            controller: function ($scope)
            {
                this.items = ["a", "b", "c", "d"];
            }
        },
        'right@route1':
        {
            templateUrl: 'route1.list.html',
            controllerAs: "vm",
            controller: function ($scope)
            {
                this.items = ["1", "2", "3", "4"];
            }
        }
    }

})

This is working fine and I do see both views getting filled with appropriate data.

Now - when I click on the .thing state - I want only this view :

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

To be loaded with data.

So obviously I should use this code :

.state('route1.thing',
{
    url: "/thing",
    views:
    {
        'right@route1':
        {
            templateUrl: 'route3.html',
            controllerAs: "vm",
            controller: function($scope)
            {
                this.thing = "I'm aaa";
            }
        }
    }
})

Question

When I have multiple view on the page , and I only want to touch a single view (not the others) — Must I still using this structure :

 .state('route1.thing',
    {
        url: "/thing",
        views:
        {
             ...
        }

I mean - Is there anything which allows me to apply the info into a specific view like in the regular format:

.state('route1.thing', {
              url: "/thing",
              templateUrl: "route3.html",
              applyTo:"right@route1" , // <-- Something like this
              controller: function($scope){
               ....
              }
          })

Answer 1

What we can do with UI-Router in this case, is file nesting...

Based on the plunker created by Royi Namir, I made few adjustment and there is an updated and working plunker

So, we have parent state 'route1.list':

.state('route1.list',
{
    url: '/list',
    views:
    {    
        'left@route1':
        {
            ...
        },
        'right@route1':
        {
            ...
        }
    }    
})

And we want to change just left or right part. As already said, we can do that with state nesting - but nesting anther the above state 'route1.list' (not under the grand parent 'route1')

.state('route1.list.thing', {
    url: '/thing',
    views: {

      'right@route1': {
        ...
      }
    }
  })
  .state('route1.list.left', {
    url: '/left',
    views: {

      'left@route1': {
        ...
      }
    }
  })

And these links will change stuff as expected:

<a ui-sref=".list">
<a ui-sref=".list.left">this will change the left</a>
<a ui-sref=".list.thing">this will change the right</a>

Check it here