UI Bootstrap Accordion content not showing on click

Question

I'm trying to add an accordion element, but clicking on one accordion header results in nothing (in my application I can actually see the content transition in and then transition out, as if it encountered some condition instructing it to collapse).

I've managed to extract the behaviour in the following codepen: https://codepen.io/deepdown22/pen/LYNQYeb

<div ng-app="plunker" ng-cloak>
    <div ng-controller="MainCtrl">
      <h1>Hello {{name}}</h1>
      <p>Start editing and see your changes reflected here!</p>
    
      {{groups}}

      
    <uib-accordion close-others="true">
    
    <div uib-accordion-group class="panel-default" ng-repeat="group in groups" is-open="group.open">
      <uib-accordion-heading>
        {{group.title}}
      </uib-accordion-heading>
      {{group.content}}
    </div>
    
  </uib-accordion>
    </div>
  </div>

angular.module('plunker', ['ui.bootstrap']);
angular.module('plunker').controller('MainCtrl', function($scope) {
  $scope.name = 'Plunker';
  $scope.groups = [
    {'title': 'a', 'content': 'b'}, 
    {'title': 'c', 'content': 'd'}
   ];
});

I'm sure I'm doing something wrong, but I can't put my finger on what.

Answer 1

1. First check out the documentation for uib-accordion (https://angular-ui.github.io/bootstrap/). You are using it wrong. Not <div uib-accordion> it is <uib-accordion>

2. Codepen is useless without the css