title: Using bootstrap collapse with angularjs
body: <p>I'm trying to include the below bootstrap collapsible panel in my angular application. However, when I click on "Expand", angular seems to see <code>href="#collapseOne"</code> and then redirects to the home page instead of collapsing the panel. My routing looks like this, and I think the <code>otherwise({redirectTo: '/home'});</code> is causing the problem. Any suggestions?</p>
  
  <pre><code>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'});
  }]);
  </code></pre>
  
  <p>The panel-</p>
  
  <pre><code>&lt;div class="panel-group" id="accordion"&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"&gt;
            Expand
          &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseOne" class="panel-collapse collapse in"&gt;
        &lt;div class="panel-body"&gt;
          ...
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>