UI-Bootstrap Accordion Directive not working - angularjs

Question

I downloaded the angularjs UI Bootstrap accordion directive found here: UI Bootstrap
However, I cannot get it to work and the <accordion> tag generates errors. I included the ['ui.bootstrap'] dependency in my angular module and I put references to files directly on page. Can anyone tell me what I am missing?
Here is my module:
var myApp = angular.module("dashboardManagement", ['ui.bootstrap'])
Here is my view:
#section scripts{
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-animate.js"></script>
<script src="~/Scripts/app/app.js"></script>
<script src="~/Scripts/app/Contractor/contractorController.js"></script>
<script src="~/Scripts/app/Contractor/contractorService.js"></script>
<script src="~/Scripts/ui-bootstrap-custom-tpls-0.13.3.js"></script>
<script src="~/Scripts/app/Test/AccordionDemoCtrl.js"></script>
}
<h2>Index</h2>
<div ng-app="dashboardManagement">
<div>
<div>
<div ng-controller="AccordionDemoCtrl">
<p>
<button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
<button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
</p>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="oneAtATime">
Open only one at a time
</label>
</div>
<accordion close-others="oneAtATime">
<accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
This content is straight in the template.
</accordion-group>
<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</accordion-group>
<accordion-group heading="Dynamic Body Content">
<p>The body of the accordion group grows to fit the contents</p>
<button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
<div ng-repeat="item in items">{{item}}</div>
</accordion-group>
<accordion-group is-open="status.open">
<accordion-heading>
I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
</accordion>
</div>
</div>
`

Answer 1

there's a couple of different issues I can see here. First is, you are including both the minified and unminified versions of these resources, so you have the same code twice. So make sure to just include <script src="~/Scripts/ui-bootstrap-custom-tpls-0.13.3.js"></script> and remove the other three similar overlapping scripts. Are you also including Angular above these scripts? because that is a dependency and will throw errors if not included before
second, is the provided example code what you're actually using? Because of course just having this:
<accordion>
</accordion>
will not do very much. You have to provide content for this directive like:
<accordion>
<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</accordion-group>
</accordion>
Check out the plnkr demo for full working example code:
http://plnkr.co/edit/MlcqWL?p=preview

Answer 2

What I discovered is that the Accordion feature is not working as expected because my _Layout.cshtml has a nav-sidebar in it. If I comment out the navbar, the Accordion works as expected. I plan to post a "new" question regarding the found issue.