bootstrap tab not working properly - html

Question

I Have included bootstrap tabs in my project.But the problem I am facing is that when I click on the tabs the content are getting changed,but the tab is not getting active.ie always the first tab is active irrespective of the click.
How can I get rid of this?
Code is given below.
<div class="row">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Trip Overview
</li>
<li role="presentation">Itinerary
</li>
<li role="presentation">Cost
</li>
<li role="presentation">Terms & Condition
</li>
<li role="presentation">Inquiry
</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 & 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>
these are the imported libraries inn my project
<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>