bootstrap选项卡无法正常工作

Question

我在我的项目中包含了引导选项卡。但是我面临的问题是，当我单击选项卡时，内容会发生变化，但选项卡没有激活。总是第一个选项卡处于活动状态而不管单击。 我怎么能摆脱这个？ 代码如下。

<div class="row">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Trip Overview</a>
        </li>
        <li role="presentation"><a href="#itinerary" aria-controls="profile" role="tab" data-toggle="tab">Itinerary</a>
        </li>
        <li role="presentation"><a href="#cost" aria-controls="messages" role="tab" data-toggle="tab">Cost</a>
        </li>
        <li role="presentation"><a href="#ta" aria-controls="settings" role="tab" data-toggle="tab">Terms & Condition </a>
        </li>
        <li role="presentation"><a href="#book" aria-controls="settings" role="tab" data-toggle="tab">Inquiry </a>
        </li>
    </ul>
 <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">
            <span>{{model.overview}}</span>
        </div>
        <div role="tabpanel" class="tab-pane" id="itinerary">
            <div ng-repeat="itenary in model.itenary.long">
                <p>{{itenary.name}}</p>
                <p>{{itenary.content}}</p>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="cost">Cost details will be uploaded soon</div>
        <div role="tabpanel" class="tab-pane" id="ta">
            <h3>Terms &amp; Conditions</h3>
            <div ng-repeat="term in model.tna.terms">
                <ul>
                    <li>{{term}}</li>
                </ul>
            </div>
            <h3>Payments</h3>
            <div ng-repeat="payment in model.tna.payment">
                <ul>
                    <li>{{payment}}</li>
                </ul>
            </div>
            <h3>Cancellation Policy</h3>
            <div ng-repeat="cancelPolicy in model.tna.payment">
                <ul>
                    <li>{{cancelPolicy}}</li>
                </ul>
            </div>






        </div>
        <div role="tabpanel" class="tab-pane" id="book">
            <div id="contact-form" class="clearfix">
                <ul id="errors" class="">
                    <li id="info">There were some problems with your form submission:</li>
                </ul>
                <p id="success">Thanks for your message! We will get back to you ASAP!</p>
                <form method="post" action="/home">
                    <label for="name">Name: <span class="required">*</span>
                    </label>
                    <input type="text" id="name" name="name" value="" placeholder="<Your Name>" required="required" autofocus="autofocus" />

                    <label for="email">Email Address: <span class="required">*</span>
                    </label>
                    <input type="email" id="email" name="email" value="" placeholder="<your mail>" required="required" />

                    <label for="telephone">Telephone:</label>
                    <input type="tel" id="telephone" name="telephone" value="" />

                    <label for="enquiry">Enquiry:{{model.name}}</label>

                    <label for="message">Message: <span class="required">*</span>
                    </label>
                    <textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>

                    <span id="loading"></span>
                    <input type="submit" value="Send" id="submit-button" />
                    <p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
                </form>
            </div>
        </div>
    </div>

</div>

这些是我项目中的导入库

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css">
<link rel="stylesheet" href="assets/css/style.css">



<!-- JS -->
<!-- load angular and angular-route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>