JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<div ng-app="app" ng-controller="ctrl">
    <section class="container">
        <aside>
            <a ng-repeat="n in nav" ui-sref="slide({'id': n.slide })">state: {{ n.slide }}</a>
        </aside>
        <div ui-view><span>dynamic content</span></div>
    </section>
</div>

CSS

.container {
    width: 100%;
    height: 250px;
}

.container aside {
    width: 120px;
    height: 100%;
    overflow-y: auto;
    padding: 0 10px;
    display: inline-block;
    background-color: #E6E6E6;
}

.container aside a {
    width: 100%;
    height: 60px;
    display: block;
    background-color: #B8B8B8;
    margin: 10px 0;
    cursor: pointer;
}

.container div {
    width: calc(100% - 145px);
    background-color: #E6E6E6;
    display: inline-block;
    height: 100%;
    float: right; 
}

.container div span {
    font-size: 20pt;
}

.container aside a:hover {
    background-color: #DDD;
}

JavaScript

angular.module('app', ['ui.router'])
.config(['$stateProvider', function($stateProvider){
    $stateProvider
    	.state('slide', { url: 'slide/:id', template: '<span>{{ content }}</span>' })
}])
.controller('ctrl', ['$scope', function($scope) {
	$scope.nav = [
        {'slide': 'a' }, {'slide': 'b' }, {'slide': 'c' },
        {'slide': 'd' }, {'slide': 'e' }, {'slide': 'f' },
        {'slide': 'g' }, {'slide': 'h' }, {'slide': 'i' },
        {'slide': 'j' }, {'slide': 'k' }, {'slide': 'l' }
    ];
    
    $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) { 
        // just to demo - use this param to get dynamic content - then populate scope variables
        
        $scope.content = toParams.id;
    });
}]);