title: AngularJs ui.bootstrap issues - collapse not working
body: <p>I am trying to make <strong>ui.bootstrap</strong> module work in Angularjs application. 
  Here is the code snippet. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Learn Angular&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js"&gt;&lt;/script&gt;
      &lt;script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"&gt;&lt;/script&gt;
      &lt;link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container" ng-app="uiApp" ng-controller="uiController"&gt;
          &lt;a href="#" class="btn btn-primary" ng-click="isCollapsed = !isCollapsed"&gt;
      Toggle Panel
    &lt;/a&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h4 class="panel-title"&gt;
          &lt;a href="#" ng-click="isCollapsed = !isCollapsed"&gt;
            Click here to collapse: {{isCollapsed}}
          &lt;/a&gt;
        &lt;/h4&gt;
              &lt;/div&gt;
              &lt;div collapse={{isCollapsed}}&gt;
                  &lt;div class="panel-body"&gt; This Section should collapse
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;pre&gt;&lt;code&gt;{{ isCollapsed }}&lt;/code&gt;&lt;/pre&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>angular.module('uiApp', ['ngRoute', 'ui.bootstrap', 'ngAnimate'])
  
  .controller('uiController', function($scope) {
    $scope.isCollapsed = false;
  });
  </code></pre>
  
  <p>What am I doing wrong. 
  I found the following question in stackoverflow, </p>
  
  <p><a href="https://stackoverflow.com/questions/30178573/collapse-transition-not-working-with-angulars-ui-bootstrap">collapse transition not working with angular&#39;s UI Bootstrap</a></p>
  
  <p>but it did not help. </p>
  
  <p>I tried in plunker - <a href="https://plnkr.co/edit/ZuzG0N00vPAWpw9kBifg?p=preview" rel="nofollow noreferrer">click here</a>
  It doesn't work there either. </p>