使用AngularJS的Bootstrap选项卡

我在使用AngularJS中的引导选项卡时遇到问题.

<div class="tab-container">
    <ul class="nav nav-tabs">
       <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
       <li><a href="#profile" data-toggle="tab">Profile</a></li>
       <li><a href="#messages" data-toggle="tab">Messages</a></li>
    </ul>
 <div class="tab-content">
    <div class="tab-pane active cont" id="home">
        <h3 class="hthin">Basic Tabs</h3>
        <p>This is an example of tabs </p>
     </div>

     <div class="tab-pane cont" id="profile">
       <h2>Typography</h2>
       <p>This is just an example of content 
     </div>

     <div class="tab-pane" id="messages">..sdfsdfsfsdf.
     </div>
  </div>
</div>

问题是,当我选择一个标签,例如Home或Profile时,我被重定向到/ home或/ profile url,而不是显示标签本身的内容.

我有一种感觉,这可以通过指令以某种方式实现,并防止重定向到页面主页或配置文件,而是显示选项卡内容.

您可以尝试使用位于此处的Angular UI引导程序组件,http://angular-ui.github.io/bootstrap/