How to add a button in accordion header in bootstrap 3.0/bootstrap-ui?

Question

I am trying to add a button to the accordion that has a dropdown menu but it doesn\'t seem to be working a:

1) button is too big so it goes past the accordions heade

Answer 1

s.alem's has a great example above, but when I converted it to angularjs 1.3 I ran into problems.

Mainly, I noticed that non-pulldown buttons with the applied $event.stopPropagation() in the ng-click kept reloading the page when it was clicked.

After playing around a little further, I realized that since the pulldown buttons worked fine, why not treat the regular buttons like pulldown buttons where needed. The solution was adding the two attribute directives (dropdown,dropdown-toggle) from the pulldown version and place them into a regular button group respectively.

I used s.alem's example and modified it to 1.3 and ui.bootstrap 0.12 and made a bunch of samples with comments in the accordion body. I hope this helps. I still would like to use normal buttons in 1.3.x without using pulldown buttons, but for now this works...

Here is my plnkr code

  Good
  bad