angular ui-router with named nested views

<html>
  <head>
    <style>
      .red {
        background-color: red;
      }
      .green {
        background-color: green;
      }
      .blue {
        background-color: blue;
      }
    </style>
  </head>
  
  <body ng-app="app">
    <ui-view></ui-view>
    
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0/angular-ui-router.js"></script>
   
    <script src="app.js"></script>
    
  </body> 
</html>

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

myApp.config(function($stateProvider) {
  $stateProvider
    .state('index', {
        url: '',
        resolve: {
          viewParams: function() {
            return { 
              color: 'blue',
              blueView: {
                color: 'blue'
              },
              greenView: {
                color: 'green'
              },
              redView: {
                color: 'red'
              }
            }
          }
        },
        views: {
          
            '@': {
                templateUrl: 'body.html'
            },
            'blue-view@index': {
                templateUrl: 'view.html',
                controller: 'ViewController',
                controllerAs: 'viewCtrl'
            },
            'green-view@index': {
                templateUrl: 'view.html',
                controller: 'ViewController',
                controllerAs: 'viewCtrl'
            },
            'red-view@index': {
                templateUrl: 'view.html',
                controller: 'ViewController',
                controllerAs: 'viewCtrl'
            }
        }
    });
});

myApp.controller('ViewController', function($scope, viewParams) {
  //$scope.color = viewParams.color;
  $scope.config = viewParams[$scope.uiViewParam];
  $scope.color = $scope.config.color;
  //debugger;
});

myApp.directive('uiViewParam', function() {
  return {
    restrict: 'A',
    link: function(scope, el, attrs) {
      //scope.test = 'test';
      scope.$parent.uiViewParam = attrs.uiViewParam;
      //debugger;
    }
  }
});


<div ui-view="blue-view" ui-view-param="blueView"></div>
<div ui-view="green-view" ui-view-param="greenView"></div>
<div ui-view="red-view" ui-view-param="redView"></div>

<div ng-class="[color]">View</div>