Angular UI Router: keeping sibling views around on state change

Question

I have a classic set-entity situation whereby the user chooses an item from a list and it is displayed in a view next to the list.

A typical way of implementing this with UI router would be to have a template which holds the html for the list and an ui-view for a list item, and the item state is a child of the list state.

I would however like the item and list states to be siblings instead, with their templates being plugged into named ui-views:

$stateProvider.state("inbox", {
  abstract: true,
  url: "/inbox",
  templateUrl: "inbox.html"
}).state("inbox.list", {
  url: "?filter_by",
  views: {  
    list: {
      templateUrl: "inbox.list.html",
      controller: "ListCtrl"
    }
  }
}).state("inbox.thread", {
  url: "/:id?filter_by",
  views: {  
    thread: {
      templateUrl: "inbox.list.html",
      controller: "ListCtrl"
    }
  }
})

inbox.html:

<div class="wrapper">
  <div class="more wrappers">
    <ul ui-view="list"></ul>
  </div>
  <div ui-view="thread"></div>
</div>

The obvious problem here is that as soon as you choose a thread from the list, the list itself disappears. This can be fixed by duplicating the "list" view configuration in the "inbox.thread" state, however the list view will still reload every time I choose a new thread.

The reason I want them as sibling states is so that I can filter the list and thus target only the "list" named ui-view while preserving the thread view with whichever thread was chosen.

So -- is there a way to persist sibling named ui-views?

Answer 1

The answer here would be:

Move the common stuff - one level up. Find the lowest common denominator.

We can still have "InboxCtrl" defined on a parent level. Even if this state is abstract. And there could be the place where the list data are loaded and stored in $scope. Both children will have access to that collection...

$stateProvider.state("inbox", {
  abstract: true,
  url: "/inbox",
  templateUrl: "inbox.html",
  controller: function($scope){
      $scope.items = ... // load data only once 
  } 
})

This is documented here:

• Abstract State Usage Examples (scroll to section called Combination)

Also, the link to working plunker (as well from documentation)