How to set nested states within multiple views using UI-Router

I have two views at the root, for example the following

<div ui-view='nav'></div>
<div ui-view='map'></div>

      

        
        
        
      

    

and inside the map template I have another view that I want to insert into it.

<h3>Maps</h3>
<div ui-view="data" ></div>

      

        
        
        
      

    

The state configuration will look like below

$stateProvider
    .state('base', {
        url: "/route1",
        views: {
          'nav':{
            templateUrl : 'nav.html',
          },
          'map':{
            templateUrl: 'map.html'
          }
        }
    })
      .state('base.list', {
        views:{
          'data':{
            templateUrl: "data.html"
          }
        }

      });

      

        
        
        
      

    

Plunkr like this

But it doesn't work. Can anyone help with this?