Angular SImple ui-router example

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <script type="application/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="application/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script type="application/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
        <script type="application/javascript" src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
        <script type="application/javascript" src="app.js"></script>
        <script type="application/javascript" src="controllers.js"></script>
    </head>
    <body ui-view></body>
</html>

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

angular.module('app').config([
             '$stateProvider', '$urlRouterProvider',
    function ($stateProvider,   $urlRouterProvider) {

        $urlRouterProvider.when('', '/dash/1');
        $urlRouterProvider.when('/', '/dash/1');
        $urlRouterProvider.otherwise('/dash/1');

        $stateProvider.state('root', {
            abstract: true,
            url: '/dash',
            templateUrl: 'root.html',
            controller: 'rootController'
        });
    
        $stateProvider.state('dash', {
            parent: 'root',
            url: '/:id',
            views: {
                'navbar': {
                    templateUrl: 'navbar.html',
                    controller: 'navbarController'
                },
                'sidebar': {
                    templateUrl: 'sidebar.html',
                    controller: 'sidebarController'
                },
                'content': {
                    templateUrl: 'content.html',
                    controller: 'contentController'
                }
            }
        });
    }
]);

angular.module('app').controller('rootController', [
             '$scope',
    function ($scope) {
        $scope.sidebar = {
            show: true
        };
        $scope.items = [{
            name: 'Alpha'
        }, {
            name: 'Bravo'
        },{
            name: 'Charlie'
        },{
            name: 'Delta'
        }];
        $scope.selected = $scope.items[0];
        $scope.select = function (item) {
            $scope.selected = item;
        }
    }
]);

angular.module('app').controller('navbarController', [
             '$scope',
    function ($scope) {

    }
]);

angular.module('app').controller('sidebarController', [
             '$scope',
    function ($scope) {

    }
]);

angular.module('app').controller('contentController', [
             '$scope',
    function ($scope) {

    }
]);

<div ui-view="navbar"></div>
<div id="container">
    <div ui-view="sidebar" class="col-md-6" ng-show="sidebar.show"></div>
    <div ui-view="content" class="col-md-6"></div>
</div>

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3">
            <button type="button" class="btn btn-default navbar-btn" ng-click="sidebar.show = !sidebar.show">Toggle sidebar</button>
        </div>
    </div>
</nav>

<ul class="nav nav-pills nav-stacked">
    <li ng-repeat="item in items" role="presentation">
        <a href="#" ng-click="select(item)">{{item.name}}</a>
    </li>
</ul>

<div class="well"><h1>{{selected.name}}</h1></div>