I am using wrapbootstrap theme - ace.
I have html page using angularjs using yeoman, karma and grunt. There I am using the ace theme. The angularjs is working fine for me. But the wrapbootstrap theme is not working properly. Some Jquery works, but some not. Here is my index.html page structure.
<html>
<head>
<!-- CSS imports -->
</head>
<body ng-app="MyApp">
<div class="navbar">
<!-- Page top header and left side menus -->
<div ng=view="">
</div>
</div>
<!-- basic scripts -->
<!--[if !IE]> -->
<script type="text/javascript">
window.jQuery || document.write("<script src='styles/assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>
<!-- <![endif]-->
<!-- [if IE]> -->
<script type="text/javascript">
window.jQuery || document.write("<script src='styles/assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<!-- <![endif] -->
<script type="text/javascript">
if("ontouchend" in document) document.write("<script src='styles/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="styles/assets/js/bootstrap.min.js"></script>
<script src="styles/assets/js/typeahead-bs2.min.js"></script>
<!-- page specific plugin scripts -->
<!-- ace scripts -->
<script src="styles/assets/js/ace-elements.min.js"></script>
<script src="styles/assets/js/ace.min.js"></script>
<!-- inline scripts related to this page -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<!-- build:js scripts/plugins.js -->
<script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-alert.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-dropdown.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-tooltip.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-modal.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-transition.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-button.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-popover.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-typeahead.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-carousel.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-scrollspy.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-collapse.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-tab.js"></script>
<!-- endbuild -->
<!-- build:js scripts/modules.js -->
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/invoiceUpload.js"></script>
<!-- endbuild -->
I get like the following image. The left side menu is able to minimize. But the top right menus notification and profile drop-downs are not working. Those drop-downs are using the <a href="#">Welcome</a>
I thought it is because the href=# interrupting by the angularjs routing so I removed the # from that. And it is still not working.
I removed 3 first 3 scripts imported inside tag. So I get like following image. The top menus are working. But left menu is not able to minimize and showing JQuery error in console that Uncaught ReferenceError: jQuery is not defined.
How can I solve this?
