Using bootstrap collapse with angularjs
angularjs, twitter-bootstrap
Solution
As mentionned in a similar question Here, simply change your href by the data-target attribute
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="javascript:;" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
Expand
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
...
</div>
</div>
</div>
</div>
Problem
I'm trying to include the below bootstrap collapsible panel in my angular application. However, when I click on "Expand", angular seems to see `href="#collapseOne"` and then redirects to the home page instead of collapsing the panel. My routing looks like this, and I think the `otherwise({redirectTo: '/home'});` is causing the problem. Any suggestions? ``` angular.module('App') .config(['$routeProvider', function($routeProvider) { $routeProvider. when('/users', {templateUrl: 'partials/users/user-list.html', controller: 'UserCtrl'}). when('/users/new', {templateUrl: 'partials/users/user-new.html', controller: 'UserNewCtrl'}). when('/users/:userid', {templateUrl: 'partials/users/user-detail.html', controller: 'UserDetailCtrl'}). otherwise({redirectTo: '/home'}); }]); ``` The panel- ``` <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Expand </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> ... </div> </div> </div> </div> ```