title: UI bootstrap dropdown not working
body: <p>I am using UI Bootstrap drop down and below is my code:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code> &lt;script src="scripts/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/angular-ui/ui-bootstrap-tpls.min.js"&gt;&lt;/script&gt;
      &lt;link href="content/css/bootstrap.min.css" rel="stylesheet" /&gt;
      &lt;script src="dropdown.js"&gt;&lt;/script&gt;
  
   &lt;div class="btn-group" uib-dropdown&gt;
          &lt;button id="split-button" type="button" class="btn btn-danger"&gt;Action&lt;/button&gt;
          &lt;button type="button" class="btn btn-danger" uib-dropdown-toggle&gt;
              &lt;span class="caret"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Split button!&lt;/span&gt;
          &lt;/button&gt;
          &lt;ul uib-dropdown-menu role="menu" aria-labelledby="split-button"&gt;
              &lt;li role="menuitem"&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
              &lt;li role="menuitem"&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
              &lt;li role="menuitem"&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
              &lt;li class="divider"&gt;&lt;/li&gt;
              &lt;li role="menuitem"&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>.js file:</strong></p>
  
  <pre><code>var app = angular.module("app", ["ui.router"]);
  
  app.controller('DropdownCtrl', function ($scope, $log) {
      $scope.items = [
        'The first choice!',
        'And another choice for you.',
        'but wait! A third!'
      ];
  
      $scope.status = {
          isopen: false
      };
  
      $scope.toggled = function (open) {
          $log.log('Dropdown is now: ', open);
      };
  
      $scope.toggleDropdown = function ($event) {
          $event.preventDefault();
          $event.stopPropagation();
          $scope.status.isopen = !$scope.status.isopen;
      };
  
      $scope.appendToEl = angular.element(document.querySelector('#dropdown-long-content'));
  });
  </code></pre>
  
  <p>Dropdown is visible  but dropdown items are coming outside as list item even before I click dropdown. Even if I click dropdown nothing happens. Is it CSS issue. Did I miss to link any file?</p>