Bootstrap accordion with dynamic data doesn't working properly

Question

I have a Bootstrap accordion on my web app which is not doing what I want, I am passing dynamic data and if you know the usage of the accordion you must provide a data-target or href attributes to it and then a div id to the parent element of the panel body.

Ok look at my code:

  <div class="panel panel-default" ng-repeat="sport in sports">
    <div class="panel-heading" ng-click="addSportToLines(sport)"
      data-toggle="collapse"
      data-parent="#accordion"
      data-target="{{sport.id}}">
      <h4 class="panel-title">
        <a>
          {{::sport.name }}
        </a>
      </h4>
    </div>
    <div id="{{sport.id}}" class="panel-collapse collapse" role="tabpanel">
      <div class="panel-body">
        <div class="list-group leagues-margin"
          class="list-group-item"
          ng-repeat="league in sport.leagues"
          ng-click="addLeagueToLines(league)">{{:: league.name}}
        </div>
      </div>

In this case the {{sport.id}} is the data-target which is the same id on the parent element of the .panel-body as you can see, if I put Inspect Element on my browser, every single element appears with a different and unique id and that's why I am here asking this, it is very weird because everything seems to be right but the behavior of my accordion is not the proper. The accordion is not opening the panels. So what suggestions do you have?

Second question: I am using Angular-Strap and the project is almost done, I am about to get done so I can not switch to Angular Bootstrap UI, is there a way to add Angular Bootstrap UI without having any conflict with Angular-Strap ? I tried yesterday but some conflicts comes up, and all I need is the accordion/collapse plugin from Angular Bootstrap UI, the reason why I am not using the Angular-Strap collapse, is because the plug in does not have the behavior I am looking for.

Answer 1

tldr; Never mix the original bootstrap.js with angular, instead use some angular module that implements bootstrap widgets.

Looks like you are mixing the bootstrap original components with angular. You can't do that, I mean, you must not let any other library manipulate the DOM if you are using angular, unless you wrap the DOM manipulation in a directive.

There are some angular modules implementing the behavior for bootstrap components. I use UI Bootstrap .