Full-size interactive panels on Angular UI Accordion (?)

Question

The question is simple, and I don’t know why I don’t get the behavior that I want, it’s the Angular UI Bootstrap accordion that I use but, as you can see in this example, the only way to open the accordion is to click on the title, and that’s not what I want, now look at this example, this is what I want , no matter where you click on the panel, the panel will simply open whether you click the name or not.

and here is the code I'm using:

<accordion close-others="false"> <accordion-group class="fx-fade-right fx-speed-300" ng-repeat="sport in sports | filter:query" ng-show="sport.leagues.length"> <accordion-heading> {{::sport.name}} <span class="pull-right badge">{{::sport.leagues.length}}</span> </accordion-heading> <div class="list-group leagues-margin" ng-click="addSportToLines(sport)"> <a href="javascript:void(0);" class="list-group-item" ng-repeat="league in sport.leagues" ng-class="{active: league.active}" ng-click="addLeagueToLines(league)">{{::league.name}} </a> <a href="javascript:void(0);" class="list-group-item list-group-item-danger" ng-hide="sport.leagues.length">No Leagues </a> </div> </accordion-group> 

Answer 1

Actually, I just realized, just put the accordion-heading content in a div :

  <accordion-heading> <div> {{::sport.name}} <span class="pull-right badge">{{::sport.leagues.length}}</span> </div> </accordion-heading>