Simon Trewhella Simon Trewhella - 1 year ago 169
AngularJS Question

Angular UI Bootstrap collapse - whats wrong?

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?



<!DOCTYPE html>
<html ng-app="app">

<link data-require="bootstrap-css@3.1.*" data-semver="3.3.1" rel="stylesheet" href="//" />
<script data-require="angular.js@*" data-semver="1.3.7" src=""></script>
<script data-require="ui-bootstrap@*" data-semver="0.12.0" src=""></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>

<body ng-controller="CollapseController">
<button class="btn btn-default" ng-click="collapsed = !collapsed">Toggle</button>
<div collapse="collapsed">
<h1>Hello Plunker!</h1>



angular.module('app', [])
.controller('CollapseController', function($scope){
$scope.collapsed = false;

Answer Source

You should declare a dependency in your app module on ui.bootstrap module:

angular.module('app', ['ui.bootstrap']);

Here's your updated working plnkr.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download