title: Can I use ng-controller in a bootstrap accordion group?
body: <p>I'm trying to create a controller for every item in my ng-bootstrap accordion but the scopeing is not working as I expect.  Am I doing something wrong?  If I add the controller to a div inside my ng-repeat accordion group it seem to work. </p>
  
  <p>In the following example SubVar does not show up but SubVar2 does.</p>
  
  <p><a href="http://plnkr.co/edit/VLFT133dz3uae887S6qI?p=preview" rel="nofollow">http://plnkr.co/edit/VLFT133dz3uae887S6qI?p=preview</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;accordion close-others="oneAtATime"&gt;
    &lt;accordion-group ng-repeat="group in groups" ng-controller="SubCtrl"&gt;  
      &lt;accordion-heading&gt;
          {{group.title}} can have markup, too! &lt;i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"&gt;&lt;/i&gt;&lt;br&gt;
          SubVar: {{sub_var}}
  
      &lt;/accordion-heading&gt;    
      {{group.content}}&lt;br&gt;
      SubVar: {{sub_var}}
      &lt;div ng-controller="SubCtrl"&gt;
        SubVar2: {{sub_var}}
      &lt;/div&gt;
    &lt;/accordion-group&gt;
  &lt;/accordion&gt;
  </code></pre>
  
  <p>javascript</p>
  
  <pre><code>angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 
  angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
    $scope.oneAtATime = true;
  
    $scope.groups = [
      {
        title: 'Dynamic Group Header - 1',
        content: 'Dynamic Group Body - 1'
      },
      {
        title: 'Dynamic Group Header - 2',
        content: 'Dynamic Group Body - 2'
      }
    ];
  });
  angular.module('ui.bootstrap.demo').controller('SubCtrl', function ($scope) {
    console.log("SUBCTRL ...", $scope.group.title);
    $scope.sub_var = $scope.group.title[$scope.group.title.length-1]
    console.log("SUBCTRL ...", $scope.sub_var);
  });
  </code></pre>