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