JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script type="text/ng-template" id="section.html">
    <div>section {{ someValue }}. Type : {{ type }}</div>
</script>

<script type="text/ng-template" id="main.html">
    <h2>main content</h2>
    <div ui-view="section1" onload="type = 'type1'"></div>
    <div ui-view="section2" onload="type = 'type2'"></div>
</script>

<div>
    <h1>header</h1>
    <div ui-view></div>
<div>

JavaScript

angular.module('myApp', ['ui.router']).config(function ($stateProvider) {
    $stateProvider.state('main', {
        abstract : true,
        templateUrl: 'main.html',
    });
    $stateProvider.state('main.nested', {
        url: '',
        views: {
            'section1' : {
                templateUrl: 'section.html',
                controller : 'ctrl'
            },
            'section2' : {
                templateUrl: 'section.html',
                controller : 'ctrl'
            }
        }
    });
});

angular.module('myApp').controller('ctrl', function ($scope) {
    $scope.someValue = 'foo';
});