The goal

We have a number of views which we want to fill with the same template/controller. Each of them should receive an id which will be loaded without affecting other controllers. We don't want to use the scope: { item: '=' } two way binding in the .directive of the template. Think of thousands of elements loaded this way (in the example we are only having two elements).

What we tried

We started using multiple views/nested views to do the rescue. We ended up with a version where many views are loading the same component, but all loading the same id, which is not the expected behavior as we want to control each of them separately, i.e. in this example clicking on title and passing its id to content1 should not cause content2 to load it as well.

(The code is based on this sample: http://www.funnyant.com/angularjs-ui-router/)

Short code

index.html

<div ui-view="header"></div>
<div ui-view="content1"></div>
<div ui-view="content2"></div>
<div ui-view="footer"></div>

script.js

  .state('app.shows', {
      url: 'shows',
      views: {
          'content1@': {
              templateUrl: 'shows.html',
              controller: function($scope, ShowsService) {
                $scope.shows = ShowsService.list();
              }
          },
          'content2@': {
              templateUrl: 'shows.html',
              controller: function($scope, ShowsService) {
                $scope.shows = ShowsService.list();
              }
          }
      }
  })
  .state('app.shows.detail', {
      url: '/',
      params: {
        // this is for hiding parameter from URL
        id: null,
      },
      views: {
          '[email protected]': {
              templateUrl: 'show-detail.html',
              controller: function($scope, $stateParams, ShowsService) {
                  $scope.selected = ShowsService.find($stateParams.id);
                }
          }
      }

  });

Plunker example

http://plnkr.co/edit/Dq5sDBzREqDzlEnNVhfp?p=preview

The question

What should we do to prevent the other view (e.g. content2 when I click on a content1 title) to change at the same time? Also in production we will have many views, not just these two, but we simplified the example for sake of brevity.

Right now we are not sure if we are missing something from the documentation or the concept is wrong and we want to abuse ui router for something it was not designed for.

(Similar question we are aware of but do not answer the question where there are multiple views loading the same component on the same screen: angular ui router state - multiple states with same template and controller)