How to use Bootstrap panels with AngularJS ng-repeat

I used the tutorial on w3schools.com to create my panel, but when I added, angular, my code stopped working.

Here's my code:

<div class="panel-group" id="accordion">
  <div ng-repeat="x in numOfMaps">
    <div class="panel {{x.count}}Details">
      <div class="panel-heading">
        <li class="m2Details m3Details panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#{{x.count}}buildingToggle">
            Building<span class="caret"></span>
          </a>
        </li>
      </div>
      <div id="{{x.count}}buildingToggle" class="panel-collapse collapse {{x.buildingOpen}}">
        <li ng-repeat="y in this[x.count + 'InfoBuilding']" class="{{y.linkclass}} panel-body">
          <a href="{{y.link}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)">
            <img src="{{y.icon}}" width="15px" height="15px">{{y.name}}
          </a>
        </li>
      </div>
    </div>
    <div class="panel {{x.count}}Details">
      <div class="panel-heading">
        <li class="m2Details m3Details panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#{{x.count}}offsiteToggle">
            Offsite<span class="caret"></span>
          </a>
        </li>
      </div>
      <div id="{{x.count}}offsiteToggle" class="panel-collapse collapse {{x.offsiteOpen}}">
        <li ng-repeat="z in this[x.count + 'InfoOffsite']" class="{{z.linkclass}} panel-body">
          <a href="{{z.link}}" ng-click="clickLinks(z.initialOut,z.initialIn,z.backIn,z.backOut,z.name)">
            <img src="{{z.icon}}" width="15px" height="15px">{{z.name}}
          </a>
        </li>
      </div>
    </div>
  </div>

I've looked at these StackOverflow questions:

Perhaps there are others, but I haven't found anything that works for me. The code works perfectly otherwise. I got the panel to display the way I want, and the Angular is filling in fine.

My Problem is the panels don't close when another one opens.

I am using UI Bootstrap, so a solution that uses that is acceptable.

UPDATE: With an answer below I have something sort of working, this seems to be what I am going for, however there are a couple of kinks that I don't understand how to work out:

<accordion close-others="true">

  <accordion-group ng-repeat="x in numOfMaps" class="{{x.count}}Details" 
                   heading="Building" data-target="#{{x.count}}BuildingToggle" 
                   is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
    <ul id="{{x.count}}BuildingToggle" class="accordion-body">
      <li ng-repeat="y in this[x.count + 'InfoBuilding']" class="{{y.linkclass}}">
        <a href="{{y.link}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)">
          <img src="{{y.icon}}" width="15px" height="15px">
          {{y.name}}
        </a>
      </li>
    </ul>
  </accordion-group>

As soon as I add the js script that makes the status function:

$scope.status = {
    isFirstOpen: true,
    isFirstDisabled: false
};

They all start open for a second then force close and wont reopen. How do I bypass this? I need a way to make each accordion unique because I think they are working off of each other because there is no data-target to tell which panel to open and close or something I don't know. Anyone know? I need that JS for the functionality because I need one accordion to stay open and be disabled, while the others can open and close.

Answer

May 15, 2015

KyleMit

You can use the Angular-UI Accordion and set close-others="true".

Then wire up whatever logic you want in each repeat block.

Here's a demo in StackSnippets

var app = angular.module('ui.bootstrap.module', ['ui.bootstrap']);
app.controller('ui.bootstrap.ctrl', function ($scope) {

  $scope.numOfMaps = [ 
    {count: 1, text: "Text 1", header: "Header 1"},
    {count: 2, text: "Text 3", header: "Header 2"},
    {count: 2, text: "Text 3", header: "Header 3"}
  ];

});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>

<div ng-app="ui.bootstrap.module" >
  <div ng-controller="ui.bootstrap.ctrl">


    <accordion close-others="true">
      
      <accordion-group ng-repeat="x in numOfMaps" 
                       heading="{{x.header}}" 
                       is-open="status.isFirstOpen" 
                       is-disabled="status.isFirstDisabled">
        {{x.text}}
      </accordion-group>
      
    </accordion>

  </div>
</div>