title: Angular: inheriting view in states
body: <p>In Angular/Ionic i have three different <code>states</code>:</p>
  
  <pre><code>.config(function($stateProvider, $urlRouterProvider) {
  
    $stateProvider
  
      .state('layout', {
        url: "",
        abstract: true,
        templateUrl: "templates/base/layout.html"
      })
  
      .state('layout.home', {
        url: "/home",
        views: {
          'mainContent' :{
            templateUrl: "templates/home.html"
          },
          'leftMenuContent' :{
            controller: "LeftMenuController",
            templateUrl: "templates/left-menu.html"
          }
        }
      })
      .state('layout.about', {
        url: "/about",
        views: {
          'mainContent' :{
            templateUrl: "templates/about.html",
            controller: "AboutController"
          },
          'leftMenuContent' :{
            controller: "LeftMenuController",
            templateUrl: "templates/left-menu.html"
          }
        }
      })
  </code></pre>
  
  <p>So i have an abstract state which defines the base/main layout, <code>home</code> and <code>about</code> states which have two <code>views</code>: <code>mainContent</code> and <code>leftMenuContent</code>. As for the <code>LeftMenuController</code> functionality, it just returns custom options for every route depending the <code>$state.current.name</code>.</p>
  
  <p>As <code>leftMenuContent</code> will be the same for every state, is there any way to avoid defining it in every new state and inheriting it from the <code>layout</code> state (or somewhere else) instead?</p>