Hello I trying to setup an angular app using UI-Bootstrap and a bootswatch template. The bootswatch template is being applied across the site however when I try to setup drop down menus, accordions, or the nav collapse nothing seems to work. The nav collapse works with the nav as far as collapsing the buttons but clicking on the button does nothing, no dropdown etc. I'm not getting any errors in Chrome dev tools and I can see that all requested scripts and CSS are loaded in the page. While this is a SPA I am wrapping it in a MVC 4 site. Here is the html I have so far for the base cshtml template.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>@ViewBag.Title</title>
<!--Remove for bundles on publish-->
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
@if (IsSectionDefined("AdditionalHeadContent"))
{
@RenderSection("AdditionalHeadContent", required: false)
}
<style type="text/css">
.bs-spacer{margin:40px;}
</style>
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="bs-spacer">
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Brand</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<a id="itemActionMenu" role="presentation" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="itemActionMenu">
<li role="presentation"><a role="menuitem" tabindex="-1">Action 1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1">Action 2</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Login</a></li>
</ul>
</div>
</nav>
@RenderBody()
</div>
<!--Remove for bundles on publish-->
@Scripts.Render("~/Scripts/angular.min.js")
@Scripts.Render("~/Scripts/angular-ui/ui-bootstrap-tpls.min.js")
@Scripts.Render("~/Scripts/angular-animate.min.js")
@RenderSection("scripts", required: false)
</body>
</html>
Any suggestions on what I might be missing? Since I'm using UI-Bootstrap jquery is not needed so I don't have it in the list. (I did test it and add it but same result).
Thanks in advance
