无法在Bootstrap导航中显示数据

Question

我正在使用AngularJS在Bootstrap 3中开展一个项目。目前，我有三个navs及其各自的ID，如下所示：

<div class="tab">
  <ul class="nav nav-pills">
    <li class="active"><a href="#pane1" data-toggle="tab">Tab 1</a></li>
    <li><a href="#pane2" data-toggle="tab">Tab 2</a></li>
    <li><a href="#pane3" data-toggle="tab">Tab 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="pane1" class="tab-pane active">
      <h4>The Markup</h4>
      <pre>Code here ...</pre>
    </div>
    <div id="pane2" class="tab-pane">
    <h4>Pane 2 Content</h4>
      <p> and so on ...</p>
    </div>
    <div id="pane3" class="tab-pane">
      <h4>Pane 3 Content</h4>
    </div>
  </div>
</div>

点击panel1后，它应显示与panel1相关的内容。与其他两个相似。但是当点击该链接时，它将重定向到主页。