Angular UI-Router Multiple Names Views

gistfile1.js

/** 
 * DEMO: http://plnkr.co/edit/TowGcXENTVDteaKs77Ah?p=preview
 * OFFICIAL DOCS: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
 * 
 * I've grown fond of ui-router and use it in pretty much every application I build now a days. 
 * However, I love the simplicity of ReactJS and would love to start building apps with it.
 * I need the ability to have multiple views running on the same page. ReactJS may take care of this already 
 * since each component is self contained with it's own methods / handlers, kind of like how AngularJS' Directives 
 * have their own controllers that can pull in data from the parent ctrl and render the directive accordingly.
 * 
 * In my demo you'll see I have two ui-view's "main" and "sidebar". I'm injecting templates into each of those views and
 * then have my 'base.home' child state only overwrite the "main" template and then my 'base.about' state overwrite both 
 * the 'main' and 'sidebar' views. I'm trying to demonstrate the flexibility of ui-router in that it can have 
 * multiple and nested views which can interact with one another and all have their own data or share data... As I said above,
 * if I understand React and React-router correctly, this already may be taken care of naturally by React's components.
 */

// script.js
myApp = angular.module('myApp', ['ui.router']);

myApp.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when('', '/');
    
    $stateProvider
    
        // Base state of our application and two views.
        .state('base', {
            abstract: true,
            views: {
                "sidebar": {
                    template: '<div>Base - Sidebar</div>'
                },
                "main": {
                    template: '<div>Base - Main</div>'
                },
            }
        })
        
        // Child of "base" state - overwrites the "main" view only.
        .state('base.home', {
            url: '/',
            views: {
                "main@": {
                    template: '<div>Welcome to this home page, enjoy your stay.</div>'
                },
            }
        })
        
        // Child of "base" state - overwrites both "main" and "sidebar" view.
        .state('base.about', {
            url: 'about',
            views: {
                "sidebar@": {
                    template: 'About Us - Sidebar',

                },
                "main@": {
                    template: 'About Us - {{ ctrl.content }}',
                    controller: function ($scope) {
                      this.content = "Chickity China the Chinese Chicken";
                    },
                    controllerAs: 'ctrl'
                }
            }
        });
});