AngularJS Nested View not Working

Question

I am working on an angularjs application example. I have a header at the top to display breadcrumbs and login/logout button. On the left, I want to have a menu with different options; for example, the menu will have Users, Contacts, Course, etc. I am struggling to display the data on the right side of the screen. I am using angularjs and Asp.Net MVC 4. As you can see from the screeshot below, the only thing that is not showing is the detail on the right side of the screen. I am also working in plunkr. Here is the link to everything that I have so far. Application in 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'];

Answer 1

After reading the document a few times, I made changes to the way the state was being done. It worked as expected after the changes below were made.

$stateProvider
.state('App', {
      url: '/App',
      views: {
          'header': {
              templateUrl : '/Menu/Header'
          },
          'content': {
              templateUrl: '/Menu/Content'
          }
         'leftmenu': {
              templateUrl : '/Menu/LeftMenu'
         }
      }
})
.state('App.Contact',{
            url: '/Contact',
                views: {
                    'content@': {
                        templateUrl: '/Account/Contact',
                        controller: 'ContactController'
                    }
        }
    });