title: ui-bootstrap collapse not working with Angular
body: <p>I have an angular module and config:</p>
  
  <pre><code>var app = angular.module('project', ['ui.bootstrap', 'restangular', 'ngRoute']);
  app.config(function($routeProvider, RestangularProvider) {
      $routeProvider.
          when('/', {
              controller:EntryCtrl,
              templateUrl:'frontend/partials/entry.html'
          })....
  </code></pre>
  
  <p>My html files, using an index and a partial file:</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
  
  &lt;meta charset="utf-8"&gt;
  
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
  &lt;title&gt;bmwpharm admin&lt;/title&gt;
  
  &lt;link rel="stylesheet" href="/frontend/css/style.css"&gt;
  
  &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div ng-app="project"&gt;
  
  &lt;div ng-view&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular-resource.js"&gt;     &lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdn.jsdelivr.net/underscorejs/1.5.1/underscore-min.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdn.jsdelivr.net/restangular/1.1.3/restangular.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/frontend/app/app.js"&gt;&lt;/script&gt;
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" &gt;&lt;/script&gt;
  &lt;script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="/frontend/js/ui-bootstrap-tpls-0.11.0.min.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>partial/entry.html:</p>
  
  <pre><code>&lt;div class="dropdown"&gt;
  &lt;a class="btn btn-default" data-toggle="dropdown" href="#"&gt;Dropdown&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
  &lt;ul class="dropdown-menu" role="menu"&gt;
      &lt;li&gt;hellooooo&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The button and caret is displayed, and the dropdown is closed initially, and will not open when clicked.
  Any idea what I am missing?</p>