title: Angular UI Bootstrap collapse - whats wrong?
body: <p>I can't seem to get angular ui bootstraps collapse directive to work. I've set up a plunkr with a minimal example, but its still non functional. Anyone shed any light on this?</p>
  
  <p><a href="http://plnkr.co/edit/gwy2CTw6h4PIGUgy39fd?p=preview" rel="nofollow">Plunkr</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="app"&gt;
  
    &lt;head&gt;
      &lt;link data-require="bootstrap-css@3.1.*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /&gt;
      &lt;script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"&gt;&lt;/script&gt;
      &lt;script data-require="ui-bootstrap@*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="CollapseController"&gt;
      &lt;button class="btn btn-default" ng-click="collapsed = !collapsed"&gt;Toggle&lt;/button&gt;
      &lt;div collapse="collapsed"&gt;
        &lt;div&gt;
          &lt;h1&gt;Hello Plunker!&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>angular.module('app', [])
  .controller('CollapseController', function($scope){
    $scope.collapsed = false;
  });
  </code></pre>