Bootstrap Accordion with angular
Simple Bootstrap accordion with some Angular wiring to a model to prove Bootstrap.js and angular.js can play nicely together.
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div id="myAppContainer" ng-app="myApp" ng-controller="Ctrl">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#/">Natap</a>
<ul class="nav">
<li><a href="#/">Home</a></li>
<li><a href="#/">Friends</a></li>
<li><a href="#/">Robots</a></li>
</ul>
<form class="navbar-search pull-right">
<input type="text" class="search-query" placeholder="Search">
</form>
</div>
</div>
</div>
<ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider">/</span></li>
<li><a href="#">Library</a> <span class="divider">/</span></li>
<li class="active">Data</li>
</ul>
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Tax Engine </a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">{{myPlaceholderData.stuff}}</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> ASMO </a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">{{myPlaceholderData.moreStuff}}</div>
...
JavaScript
var app = angular.module('myApp', []);
function Ctrl($scope) {
$scope.myPlaceholderData = {
stuff: "stuff",
moreStuff: "More Stuff",
noddy: "blow me"
};
}