Вложенное представление AngularJS не работает

Я работаю над примером приложения angularjs. У меня есть заголовок вверху для отображения хлебных крошек и кнопки входа/выхода. Слева я хочу иметь меню с различными опциями; например, в меню будут «Пользователи», «Контакты», «Курс» и т. д. Я изо всех сил пытаюсь отобразить данные в правой части экрана. Я использую angularjs и Asp.Net MVC 4. Как видно из скриншота ниже, единственное, что не отображается, — это детали в правой части экрана. Я также работаю в plunkr. Вот ссылка на все, что у меня есть до сих пор. Приложение в Plunkr

//This is the app controller
   var App = angular.module('App', ['ui.router']);

//App.controller('MenuController', MenuController);
//App.controller('ContactController', ContactController);
App.config(['$stateProvider', '$locationProvider', '$httpProvider', '$urlRouterProvider',
    function ($stateProvider, $locationProvider, $httpProvider, $urlRouteProvider) {
        $locationProvider.hashPrefix('!').html5Mode(true);
        // $urlRouteProvider.otherwise("/Menu");
        $stateProvider
        .state('Menu',
            {
                url: '/Menu',
                views: {
                    'TopContainer': {
                        templateUrl: '/Account/Menu',
                        controller: 'MenuController'
                    },
                    'bottomContainer': {
                        templateUrl: '/Contact',
                        controller: 'ContactController'
                    }
                }
            })
        .state('Menu.Contact',{
            url: '/Contact',
                views: {
                    'TopContainer': {
                        templateUrl: '/Account/Menu',
                        controller: 'MenuController'
                    },
                    'bottomContainer': {
                        templateUrl: '/Contact',
                        controller: 'ContactController'
                    }
                }
             })
        .state('Menu.Contact.Detail',
        {
            url: '/Detail',
            views: {
                'TopContainer': {
                    templateUrl: '/Account/Menu',
                    controller: 'MenuController'
                },
                'bottomContainer': {
                    templateUrl: '/Contact',
                    controller: 'ContactController'
                }
            }
        });
        $urlRouteProvider.otherwise('/Menu');

    }]);


App.controller('MenuController', function ($scope, $state) {
$scope.username = "test";
$state.transitionTo('Menu.Contact.Detail');
});

App.controller('ContactController', function($scope,$state){
    $scope.reviewMessage = 'My Contacts';
    $scope.contacts = [{ name: 'Alice' }, { name: 'Bob' }];
});
MenuController.$inject = ['$scope', '$state'];