skip to Main Content

I’m fairly new to angular and I was trying to add the accordion, but I keep getting this error from the console. “Controller ‘accordion’, required by directive ‘accordionGroup’, can’t be found!” I downloaded the custom build version of the angular ui. I injected the ‘ui.bootstrap’ into the module like this.

var app = angular.module('MenuApp', ['ngRoute', 'ui.bootstrap']);

In my index.html I added the following code to load the files to the head section.

<link href="" rel="stylesheet">
<link href="" rel="stylesheet">

In the body, I loaded the custom js file like this.
<script src="[email protected](angular.min.js),[email protected](angular-ui-router.min.js)"></script>
<script src=""></script>
<script src="js/ui-bootstrap-tpls-0.13.1.js"></script>

In my menu.html, I am loading the accordion menu like this.
<accordion-group is-open="">
I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down':, 'glyphicon-chevron-right': !}"></i>
This is just some content to illustrate fancy headings.

So my question is, how do I fix this issue? I have been reading the docs on their website and somehow I can’t seem to understand how to fix the error. I know I am probably missing something, but I’m not really sure at this point.



  1. Chosen as BEST ANSWER

    I loaded this version 0.12 of ui.bootstrap because the animation was broken in version 0.13.

    <script src=""></script>

    I copied a plunker file I found with nested accordion menus and then I edited it to my liking and it finally worked. I was so ecstatic.

    <accordion close-others="oneAtATime">
    <accordion-group is-open="" is-disabled="status.isFirstDisabled"> <accordion-heading> TITLE HERE </accordion-heading> DATA HERE </accordion>

    I made sure to add the files in the head section too. It worked just fine. <link href="" rel="stylesheet"> <script src=""></script> <script src=""></script> <script src=""></script>

  2. I didn’t look closely at the CSS & JS references, but for the HTML, it seems like you forgot the root <accordion> tag. Directly from the UI-Bootstrap docs, you need a structure like:


    If this helps, please accept the answer!

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top