title: Extending parent state with extra views
body: <p><strong>Using</strong>: AngularJS and UI-Router. </p>
  
  <p>I am trying to create a page that has two views: <code>menu</code> and <code>main</code>. One is for a menu and the other is for whatever content there may be. However, I do not want to define both views in all states every time. The <code>menu</code> view will not change too often. So I created a parent 'root' state which contains only the <code>menu</code> view. The other states then derive from this and add appropriate views.</p>
  
  <p>The code looks like this (in a file <code>app.js</code>):</p>
  
  <pre><code>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])
      ;
  </code></pre>
  
  <p>The result is that only the <code>menu</code> view is displayed. The <code>main</code> view is not displayed, unless I also add it to the <code>root</code> state. Anyone know what is wrong? </p>
  
  <p><strong>EDIT</strong></p>
  
  <p>The HTML that contains the views:</p>
  
  <pre><code>&lt;div ng-app="Admin"&gt;
      &lt;a ui-sref="root.main"&gt;Click me&lt;/a&gt;
      &lt;div class="ui menu" ui-view="menu"&gt;&lt;/div&gt;
      &lt;div class="ui segment"&gt;
          &lt;div ui-view="main"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;br&gt;
  &lt;/div&gt;
  
  &lt;script src="{{ url_for('static', filename='js/menu.js') }}"&gt;&lt;/script&gt;
  &lt;script src="{{ url_for('static', filename='js/main_controllers.js') }}"&gt;&lt;/script&gt;
  &lt;script src="{{ url_for('static', filename='js/app.js') }}"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>There is a similar question here: <a href="https://stackoverflow.com/questions/20439630/ui-router-inheriting-views">UI-Router inheriting views</a>, but this does not work for me...</p>
  
  <p><strong>EDIT 3</strong></p>
  
  <p>I managed to very simply reproduce this in plnkr: <a href="http://plnkr.co/edit/uYlFgsvq8hQHON8EESEx?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/uYlFgsvq8hQHON8EESEx?p=preview</a></p>