Extending parent state with additional views

Usage : AngularJS and UI-Router.

I am trying to create a page with two views: menu

and main

. One for the menu and the other for whatever content it might have. However, I don't want to define both views in all states every time. The view menu

will not change too often. So I created a parent "root" state that only contains the view menu

. Then other states follow from this and corresponding views are added.

The code looks like this (in the file app.js

):

angular
    .module('Admin', ["ui.router"])
    .config(["$stateProvider", function($stateProvider) {
        $stateProvider.state('root', {
            abstract: true,
            views: {
                "menu": {
                    templateUrl: "../static/partials/menu.html",
                    controller: "MenuController"
                }
            }
        }).state('root.main', {
            url: "",
            parent: 'root',
            views: {
                "main": {
                    templateUrl: "../static/partials/landing.html",
                    controller: "MainController"
                }
            }
        }).state('root.login', {
            url: "/login",
            parent: 'root',
            views: {
                "main": {
                    templateUrl: "../static/partials/login.html",
                    controller: "LoginController"
                }
            }
        })
        ;
    }])
    .controller('MainController', ["$scope", "$http", mainController])
    .controller('MenuController', ["$scope", "$http", menuController])
    .controller('LoginController', ["$scope", "$http", loginController])
    ;

      

        
        
        
      

    

As a result, only the view is displayed menu

. The view is main

not displayed unless I add it to the state root

. Does anyone know what is wrong?

EDIT

HTML that contains views:

<div ng-app="Admin">
    <a ui-sref="root.main">Click me</a>
    <div class="ui menu" ui-view="menu"></div>
    <div class="ui segment">
        <div ui-view="main"></div>
    </div>
    <br>
</div>

<script src="{{ url_for('static', filename='js/menu.js') }}"></script>
<script src="{{ url_for('static', filename='js/main_controllers.js') }}"></script>
<script src="{{ url_for('static', filename='js/app.js') }}"></script>

      

        
        
        
      

    

EDIT 2

There is a similar question here: UI-Router inherits views , but that doesn't work for me ...

EDIT 3

I was able to just reproduce this in plnkr: http://plnkr.co/edit/uYlFgsvq8hQHON8EESEx?p=preview