title: Bootstrap drop down does not work
body: <p>I'm trying to accomplish a simple drop down using the bootstrap example, but it does not respond to anything when I click it. I have searched on this problem and none of the solutions helped me (i.e. putting the links to the resources in head, or at different order). Don't mind the angular code</p>
  
  <p>Here is the html.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html class="no-js" lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;!-- Bootstrap style --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /&gt;
      &lt;!-- express style that I like--&gt;
      &lt;link rel="stylesheet" href="stylesheets/style.css" /&gt;
      &lt;title&gt;Pharmpool NIH | Express&lt;/title&gt;
  &lt;/head&gt;
  &lt;body ng-app="nihApp"&gt;
  
      &lt;h1&gt;PharmPool on nih Express&lt;/h1&gt;
      &lt;br /&gt;
      &lt;div ng-controller="MainController"&gt;
  
          &lt;div class="dropdown"&gt;
              &lt;button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"&gt;
                  Dropdown
                  &lt;span class="caret"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;ul class="dropdown-menu" aria-labelledby="dropdownMenu1"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;!-- jQuery and Angular --&gt;
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"&gt;&lt;/script&gt;
      &lt;!-- Bootstrap js --&gt;
      &lt;script type="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;!-- angular code[controller] --&gt;
      &lt;script type="text/javascript" src="javascripts/controller.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" &gt;
          $(document).ready(function() {
              $('.dropdown-toggle').dropdown();
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the console error:</p>
  
  <pre><code>Uncaught TypeError: $(...).dropdown is not a function
  </code></pre>
  
  <p>Any help is appreciated. thanks, Alon</p>