Full size clickable panels on Angular UI Accordion (?)

Question

The question is simple, and I don't know why I am not getting the behavior I want, this is the Angular UI Bootstrap accordion that I am using but as you can see on that example the only one way to open the accordion is if you click on the title, and that's not what I want,now look at this example, this is what I want, it doesn't matter where you click on the panel, the panel just will open whether you click on the title or not.

and here is the code I am 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 figured that out, just place the accordion-heading content into a div:

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