AngularJS UiBoostrap Accordion. Controller 'uibAccordion', required by directive 'uibAccordionGroup', can't be found

accordion, angular-ui-bootstrap, angularjs

Solution

Actually the error gives you a hint

Controller 'uibAccordion', required by directive 'uibAccordionGroup', can't be found!

The hint is with the word `required`. In AngularJS, directives can define a requirement to be included inside other directives, and if these to-be-father directives don't exist then you will get an error, as you got.

In your case, the directive `uibAccordionGroup` needs to be nested inside the `uibAccordion` which you didn't define inside your HTML.

This is how it supposed to look like

<uib-accordion close-others="oneAtATime"> <!-- pay attention to this line -->
    <div id="Help" uib-accordion-group is-open="main.openHelp">
        <uib-accordion-heading>
        <span >
            Help
        </span>            
        <span>
        <i class="pull-right fa" ng-click="main.openHelp = !main.openHelp" ng-class="{'fa-chevron-down': main.openHelp, 'fa-chevron-left': !main.openHelp}"></i>                    
        </span>
    </uib-accordion-heading>
        <div class="row">
            <div>
                 Useless Content
            </div>
        </div>
    </div>
</uib-accordion>

Also @Nair Athul is right, you should either include

`<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js">`

or

`<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js">`

not both!

Problem

I'm working on an AngularJS app. In my index.html, at the end of my body tag I declare this : ``` <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script> <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> ``` I include 'ui.bootstrap' in my angular.module And in my html, I try to use uib-accordion ``` <div id="Help" uib-accordion-group is-open="main.openHelp"> <uib-accordion-heading> <span > Help </span> <span> <i class="pull-right fa" ng-click="main.openHelp = !main.openHelp" ng-class="{'fa-chevron-down': main.openHelp, 'fa-chevron-left': !main.openHelp}"></i> </span> </uib-accordion-heading> <div class="row"> <div> Useless Content </div> </div> </div> ``` This is working fine, I can open / close it etc... The problem is that I have an error logged : https://docs.angularjs.org/error/$compile/ctreq?p0=uibAccordion&p1=uibAccordionGroup I dont understand what I should do to solve this. By the way, since I use multiple times uib accordion in this page, this error is logged multiple times. ( I have different `<div uib-accordion-group ></div>`tags )

Original source