Angular Ui Router: Keeping Sibling Views Around On State Change

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 route

Solution 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)