nested accordion using multiple controllers

[jorguerra]

Hi, I need to make a nested accordion with 3 levels and each level belongs to a different controller and it fails as soon as I add the attribute ng-controller.

Here is the code I am trying to implement

#Template
<v-accordion class="vAccordion--default">
  #Level 1
  <v-pane ng-repeat="sector_ in base.sectors" ng-controller="SectorController" ng-init="sector = sector_">
   <v-pane-header >{{sector.name}}</v-pane-header>
   <v-pane-content> 
    <v-accordion class="vAccordion--default">
     #Level 2
      <v-pane ng-repeat="type_ in sector.types" ng-controller="TypeController" ng-init="type=type_">
       <v-pane-header>{{type.name}}</v-pane-header>
       <v-pane-content>
        <v-accordion class="vAccordion--default">
          #Level 3
          <v-pane ng-repeat="topic_ in type.topics" ng-controller="TopicController" ng-init="topic=topic_">
            <v-pane-header>{{topic.name}}</v-pane-header>
            <v-pane-content>
               <input ng-model="topic" ng-click="doSomethingInTopicController()">{{topic.something}}
            </v-pane-content>
           </v-pane>                            
         </v-accordion>
       </v-pane-content>
     </v-accordion>
   </v-pane-content>
 </v-pane>
</v-accordion>

Each controller can handle specific operations with the specific scope inside of the each controller accordingly. This help managing each item of each type separately.

I tried to move the code to 3 different files using ng-include but it didn't work either. That would be the main goal.

I tried to make it just in one level using ng-controller but even without nesting accordions as soon as I add ng-controller everything fails