Disabling $ routeprovider when using bootstrap

Question

I have the normal normal router code, but in a specific section of my HTML I have some sections for turning / smoothing twitter. Clicking on them brings up a routine that I don't want to do. Is there any way to prevent this?

myApp.config(function ($routeProvider, $locationProvider) {

  $routeProvider
    .when('/', {
      templateUrl: 'login.html',
      controller: 'mainController'
    })
    .when('/projects', {
      templateUrl: 'project.html',
      controller: 'projectController'
    });

  $locationProvider.html5Mode(true);
});

HTML section

<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">
                              Open Projects
                          </a>
                      </h4>
                  </div>
                  <div id="collapseOne" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <table id="openProjectTable" class="table">
                            <tr><th>Project</th><th>Source</th><th>Target</th></tr>
                        </table>
                    </div>
                </div>
            </div>

Answer 1

The simplest solution is to use a data target instead of href :

<a data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
  Open Projects
</a>

Demo: http://plnkr.co/edit/OYEeUd6hAJE0hBBJOrp7?p=preview