title: wrapbootstrap jquery not working with angularjs
body: <p>I am using <a href="http://wrapbootstrap.com/preview/WB0B30DGR" rel="nofollow noreferrer">wrapbootstrap theme - ace</a>.</p>
  
  <p>I have html page using <strong>angularjs using yeoman, karma and grunt</strong>. 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 <strong>index.html</strong> page structure.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;!-- CSS imports --&gt;
  &lt;/head&gt;
  &lt;body ng-app="MyApp"&gt;
  &lt;div class="navbar"&gt;
   &lt;!--  Page top header and left side menus --&gt;
   &lt;div ng=view=""&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- basic scripts --&gt;
  
      &lt;!--[if !IE]&gt; --&gt;
  
      &lt;script type="text/javascript"&gt;
          window.jQuery || document.write("&lt;script src='styles/assets/js/jquery-2.0.3.min.js'&gt;"+"&lt;"+"/script&gt;");
      &lt;/script&gt;
  
      &lt;!-- &lt;![endif]--&gt;
  
      &lt;!-- [if IE]&gt; --&gt;
      &lt;script type="text/javascript"&gt;
       window.jQuery || document.write("&lt;script src='styles/assets/js/jquery-1.10.2.min.js'&gt;"+"&lt;"+"/script&gt;");
      &lt;/script&gt;
      &lt;!-- &lt;![endif] --&gt;
  
      &lt;script type="text/javascript"&gt;
          if("ontouchend" in document) document.write("&lt;script src='styles/assets/js/jquery.mobile.custom.min.js'&gt;"+"&lt;"+"/script&gt;");
      &lt;/script&gt;
      &lt;script src="styles/assets/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="styles/assets/js/typeahead-bs2.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- page specific plugin scripts --&gt;
  
      &lt;!-- ace scripts --&gt;
  
      &lt;script src="styles/assets/js/ace-elements.min.js"&gt;&lt;/script&gt;
      &lt;script src="styles/assets/js/ace.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- inline scripts related to this page --&gt;
  
      &lt;script src="bower_components/jquery/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
  
      &lt;!-- build:js scripts/plugins.js --&gt;
      &lt;script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/bootstrap-sass/js/bootstrap-alert.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/bootstrap-sass/js/bootstrap-dropdown.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/bootstrap-sass/js/bootstrap-tooltip.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/bootstrap-sass/js/bootstrap-modal.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/bootstrap-sass/js/bootstrap-transition.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/bootstrap-sass/js/bootstrap-button.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/bootstrap-sass/js/bootstrap-popover.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/bootstrap-sass/js/bootstrap-typeahead.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/bootstrap-sass/js/bootstrap-carousel.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/bootstrap-sass/js/bootstrap-scrollspy.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/bootstrap-sass/js/bootstrap-collapse.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/bootstrap-sass/js/bootstrap-tab.js"&gt;&lt;/script&gt;
      &lt;!-- endbuild --&gt;
  
      &lt;!-- build:js scripts/modules.js --&gt;
      &lt;script src="bower_components/angular-resource/angular-resource.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-cookies/angular-cookies.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-sanitize/angular-sanitize.js"&gt;&lt;/script&gt;
      &lt;!-- endbuild --&gt;
  
      &lt;!-- build:js({.tmp,app}) scripts/scripts.js --&gt;
      &lt;script src="scripts/app.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/controllers/main.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/controllers/invoiceUpload.js"&gt;&lt;/script&gt;
      &lt;!-- endbuild --&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>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 <code>&lt;a href="#"&gt;Welcome&lt;/a&gt;</code></p>
  
  <p>I thought it is because the <strong>href=#</strong> interrupting by the <strong>angularjs routing</strong> so I removed the <strong>#</strong> from that. And it is still not working.
  <img src="https://i.stack.imgur.com/nBqrM.png" alt="enter image description here"></p>
  
  <p>I removed 3 first 3 scripts imported inside <strong></strong> 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 <strong>Uncaught ReferenceError: jQuery is not defined</strong>.</p>
  
  <p><img src="https://i.stack.imgur.com/HyL7s.png" alt="enter image description here"></p>
  
  <p>How can I solve this?</p>