Angular Список или список вложенных контроллеров js

Я новичок в angular и хотел получить совет по лучшему маршруту, чтобы достичь чего-то вроде этого. Этот jsFiddle не работает, но вот идея.

Я хочу, чтобы вкладки были сверху, с элементами, доступными для выбора. Когда вы выбираете элемент, данные заполняются ниже.

Я хотел иметь ListController и ItemController, поэтому я могу выделить методы, действующие в списке, против того, что действуют на элемент; так как я хотел, чтобы элементы были обновляемыми напрямую. Я получаю все данные на загрузке страницы, поэтому я не хочу загружать каждую вкладку динамически.

Как я могу это сделать и/или как я могу исправить скрипку или новую скрипку? jsFiddle plunker

<div ng-app="myApp">
  <div ng-controller="ListController">
    <ul class="nav nav-pills">
      <li ng-repeat="artist in list">
        <a show-tab="" ng-href="" ng-click="select(artist)">{{$index}} - {{artist.name}}</a>
      </li>
    </ul>
    <div ng-controller="ItemController">
      <p>{{name}} - {{selected.name}}</p>
      <span>{{totalSongs}}</span>
      <span>{{selected.songs.length}}</span>

      <ul>
        <li ng-repeat="song in selected.songs" ng-controller="ItemController">{{song}} - {{totalSongs}}</li>
      </ul>
    </div>
  </div>
</div>

Я бы очень хотел, чтобы контроллеры были разделены и логически разделены.