Angular JS reloading whole body when clicked on Other Tabs - angularjs

Question

My web page has 3 bootstrap tabs with data some data being populated run time. After page loads, tab1 looks fine and when I click on other tabs, whole body reloads and tab1 displays. I do not see any errors in Console.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<div class="container" -ng-controller="incidentSummaryCtrl" >
<div class="panel panel-primary">
<div class="panel-heading"><h3>Incident {{c.data.incidentData[0].incidentId}} </h3> </div>
<div class="panel-body" style="padding:0px">
<div class="panel-group">
<div class="container">
<div class="row text-center">
<h1 class="white"></h1>
</div>
<div class="row">
<div class="col-md-10">
<div class="tab" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Incident Information</li>
<li role="presentation" class="">Potential Indicators</li>
<li role="presentation" class="">Course of Action</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade active in" id="Section1">
<div class="col-md-3 col-xs-3">
<p><label>First Name: </label> {{c.data.incidentData[0].firstName}} </p>
<p><label>Last Name: </label> {{c.data.incidentData[0].lastName}} </p>
<p><label>Email: </label> {{c.data.incidentData[0].email}} </p>
<p><label>Telephone Number: </label> {{c.data.incidentData[0].telephoneNumber}} </p>
<p><label>Reported Date: </label> {{c.data.incidentData[0].createdDate}} </p>
<p><label>Last Updated: </label> {{c.data.incidentData[0].lastUpdated}} </p>
</div>
<div class="col-md-3 col-xs-3">
<p><label>Incident #: </label> {{c.data.incidentData[0].incidentId}} </p>
<p><label>Status: </label> {{c.data.incidentData[0].incidentStatus}} </p>
<p><label>Category: </label> {{c.data.incidentData[0].incidentType}} </p>
<p><label>Organization: </label> {{c.data.incidentData[0].organization}} </p>
<p><label>Department: </label> {{c.data.incidentData[0].department}} </p>
<p><label>Assigned To: </label> {{c.data.incidentData[0].assignedTo}} </p>
</div>
<div class="col-md-12 col-xs-12">
<p><label for="notes">Notes:</label> </p>
<textarea class="form-control" rows="5" id="notes" ng-readonly="true">{{c.data.incidentData[0].note}}</textarea>
</div>
</div> <!-- End of Section1 -->
<div role="tabpanel" class="tab-pane fade" id="Section2">
<label>Extracted Potential Indicators</label>
<table class="table table-condensed table-hover table-bordered">
<thead>
<tr>
<th>No</th>
<th>Ranking</th>
<th>Indicator</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="indicator in c.data.indicatorsData track by $index" >
<td>{{indicator.number}}</td>
<td>{{indicator.urgencyRanking}}</td>
<td>{{indicator.indicatorText}}</td>
<td class="{{indicator.cssClass}}">{{indicator.indicatorStatus}}</td>
</tr>
</tbody>
</table>
</div> <!-- End of Section2 -->
<div role="tabpanel" class="tab-pane fade" id="Section3">
<p><label>Recommendation: </label> {{c.data.courseOfActionsData[0].recommendedName}} </p>
<p><label>Reasoning: </label> {{c.data.courseOfActionsData[0].reasoning}} </p>
<p><label>Select Course of Action: </label>
<select class="form-control" id="sel1" ng-model="selectedValue" style="max-width:700px">
<option ng-repeat="coa in c.data.ListOfCourseOfActionsData track by $index" value="{{coa.name}}" ng-selected="{{defaultvalue == c.data.courseOfActionsData[0].recommendedName}}">{{coa.name}}</option>
</select> </p>
<p><label>Additional Actions: </label> </p>
<div id="actions">
<label class="checkbox-inline"><input type="checkbox" value="" id="sendEmailUpdateToReporter">Send Email Update to Reporter</label>
<label class="checkbox-inline"><input type="checkbox" value="" id="notifyIsp" ng-model="notifyIsp">Notify ISP</label>
<label class="checkbox-inline"><input type="checkbox" value="" id="notifyDomainRegistrar" ng-model="notifyDomainRegistrar">Notify Domain Registrar</label> <br/>
<label class="checkbox-inline"><input type="checkbox" value="" id="sendEmailReceipt">Send Email Receipt to Reporter</label>
<label class="checkbox-inline"><input type="checkbox" value="" id="setStatusOfTicketToResolved">Set Status of Ticket Resolved
</label>
<label class="checkbox-inline"><input type="checkbox" value="" id="notifyProduction">Notify Production</label><br/>
<label class="checkbox-inline"><input type="checkbox" value="" id="resolveAndCloseTicket">Resolve and Close Ticket</label>
<label class="checkbox-inline"><input type="checkbox" value="" ng-model="checked" id="assignToGroup">Assign to Group</label>
<br/>
</div> <br/>
<div class="row">
<div id="assignment" class="col-md-4">
<b>Group Name:</b>
<select id="groupSelectedValue" ng-model="groupSelectedValue" style="max-width:700px" class="form-control">
<option value="Tier1">Tier1</option>
<option value="Tier2">Tier2</option>
<option value="Tier3">Tier3</option>
<option value="Tier4">Tier4</option>
<option value="Tier5">Tier5</option>
<option value="Halo Administrator">Halo Administrator</option>
</select>
</div>
<div class="col-md-4">
<b>Assign To:</b>
<select id="assignTo" ng-model="assignTo" style="max-width:700px" class="form-control" >
<option ng-repeat="user in (c.data.groupUsers | filter: {'groupName':groupSelectedValue}) track by $index" value="user.name">{{user.name}}</option>
</select>
</div>
</div>
<br/>
<div id="commentsSection" >
<div class="">
<span ng-hide="c.data.incidentData[0].incidentStatus == 'Closed'">
<b>Comments:</b> <textarea id="comments" class="form-control" ng-model="comments"> </textarea> <br/>
</span>
</div>
<br/>
<div class="">
<b>Comments History: </b>
<table class="table table-responsive">
<thead>
<tr>
<th>Comment </th>
<th>Entered Date </th>
<th>Entered By </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="text in c.data.commentshistory track by $index">
<td>{{text.comment}}</td>
<td>{{text.enteredDate}}</td>
<td>{{text.enteredBy}}</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" ng-click="execute()">Execute</button>
<input type="hidden" id="sysId" value="{{sysId}}">
</div>
</div>
</div> <!-- End of Section3 -->
</div>
</div>
</div>
</div>
</div> <!-- End of Container -->
</div> <!--End of Panel Group -->
</div>
</div>
</div>
Angular JS Code:
(function()
{
"use strict";
var app=angular.module('indicatorModal',[]);
app.controller('incidentSummaryCtrl',['$scope',function($scope)
{
$scope.updateSelectedCoa=function()
{
//get Values from Form
var selectedCoa=jQuery("#sel1 option:selected").text();
var sendEmailUpdateToReporter=jQuery("#sendEmailUpdateToReporter").is(":checked");
var notifyIsp=jQuery("#notifyIsp").is(":checked");
var notifyDomainRegistrar=jQuery("#notifyDomainRegistrar").is(":checked");
var sendEmailReceipt=jQuery("#sendEmailReceipt").is(":checked");
var setStatusOfTicketToResolved=jQuery("#setStatusOfTicketToResolved").is(":checked");
var notifyProduction=jQuery("#notifyProduction").is(":checked");
var assignToNextTier=jQuery("#assignToNextTier").is(":checked");
var assignToGroup=jQuery("#assignToGroup").is(":checked");
var resolveAndCloseTicket=jQuery("#resolveAndCloseTicket").is(":checked");
var sysId=jQuery("#sysId").val();
var gr=new GlideRecord('x_19668_halo_incident');
gr.addQuery('sys_id',sysId);
gr.query(callbackFunction);
function callbackFunction(gr)
{
if(gr.next())
{
$scope.updateSelectedSysIdOfCoa(selectedCoa,sysId);
gr.send_email_update_to_reporter=sendEmailUpdateToReporter;
gr.notify_isp=notifyIsp;
gr.send_email_receipt_to_reporter=sendEmailReceipt;
gr.set_status_to_resolved=setStatusOfTicketToResolved;
gr.notify_production=notifyProduction;
gr.notify_domain_registrar=notifyDomainRegistrar;
gr.assign_to_tier=assignToNextTier;
gr.assign_to_group=assignToGroup;
gr.resolve_and_close_the_ticket=resolveAndCloseTicket;
gr.update();
}
}
};
$scope.updateSelectedSysIdOfCoa=function(selectedCoa,sysId)
{
var selectedCoaSysId='';
var gr1=new GlideRecord('x_19668_halo_selcted_ticket_course_of_action');
gr1.addQuery('incident_id',sysId);
gr1.query(callbackFunction2);
function callbackFunction2(gr1)
{
if(gr1.next())
{
var gr2=new GlideRecord('x_19668_halo_courseofactions');
gr2.addQuery('ticket_coa_name',selectedCoa);
gr2.query();
if(gr2.next())
{
selectedCoaSysId=gr2.sys_id+'';
}
gr1.ticket_coa_selected_id=selectedCoaSysId;
gr1.update();
}
}
};
$scope.passSysId=function(indicatorSysId,indicatorType)
{
var ipIndicatorsData = JSON.parse(sessionStorage.getItem('ipIndicatorsData'));
var domainIndicatorsData = JSON.parse(sessionStorage.getItem('domainIndicatorsData'));
var hashCodeIndicatorsData = JSON.parse(sessionStorage.getItem('hashCodeIndicatorsData'));
if(indicatorType == 'IP Address')
{
for(var indicator in ipIndicatorsData )
{
if(ipIndicatorsData[indicator].sysId == indicatorSysId)
{
jQuery("#indicatorId").text(ipIndicatorsData[indicator].indicatorId);
jQuery("#indicatorStatus").text(ipIndicatorsData[indicator].indicatorStatus);
jQuery("#indicatorType").text(ipIndicatorsData[indicator].indicatorType);
jQuery("#urgencyRanking").text(ipIndicatorsData[indicator].urgencyRanking);
jQuery("#completedEnrichCount").text(ipIndicatorsData[indicator].completedEnrichCount);
jQuery("#enrichStartTimestamp").text(ipIndicatorsData[indicator].enrichStartTimestamp);
jQuery("#enrichEndTimestamp").text(ipIndicatorsData[indicator].enrichEndTimestamp);
jQuery("#indicatorText").text(ipIndicatorsData[indicator].indicatorText);
$("#indicatorLink").attr("href", "https://dev21310.service-now.com/haloportal/?id=potential_indicator_summary&indicator_id="+indicatorSysId);
}
}
}
else if(indicatorType == 'Full Qualified Domain Name (FQDN)')
{
for(var indicator in domainIndicatorsData )
{
if(domainIndicatorsData[indicator].sysId == indicatorSysId)
{
jQuery("#indicatorId").text(domainIndicatorsData[indicator].indicatorId);
jQuery("#indicatorStatus").text(domainIndicatorsData[indicator].indicatorStatus);
jQuery("#indicatorType").text(domainIndicatorsData[indicator].indicatorType);
jQuery("#urgencyRanking").text(domainIndicatorsData[indicator].urgencyRanking);
jQuery("#completedEnrichCount").text(domainIndicatorsData[indicator].completedEnrichCount);
jQuery("#enrichStartTimestamp").text(domainIndicatorsData[indicator].enrichStartTimestamp);
jQuery("#enrichEndTimestamp").text(domainIndicatorsData[indicator].enrichEndTimestamp);
jQuery("#indicatorText").text(domainIndicatorsData[indicator].indicatorText);
jQuery("#indicatorLink").attr("href", "https://dev21310.service-now.com/haloportal/?id=potential_indicator_summary&indicator_id="+indicatorSysId);
}
}
}
else if(indicatorType == 'Hash Code')
{
for(var indicator in hashCodeIndicatorsData )
{
if(hashCodeIndicatorsData[indicator].sysId == indicatorSysId)
{
jQuery("#indicatorId").text(hashCodeIndicatorsData[indicator].indicatorId);
jQuery("#indicatorStatus").text(hashCodeIndicatorsData[indicator].indicatorStatus);
jQuery("#indicatorType").text(hashCodeIndicatorsData[indicator].indicatorType);
jQuery("#urgencyRanking").text(hashCodeIndicatorsData[indicator].urgencyRanking);
jQuery("#completedEnrichCount").text(hashCodeIndicatorsData[indicator].completedEnrichCount);
jQuery("#enrichStartTimestamp").text(hashCodeIndicatorsData[indicator].enrichStartTimestamp);
jQuery("#enrichEndTimestamp").text(hashCodeIndicatorsData[indicator].enrichEndTimestamp);
jQuery("#indicatorText").text(hashCodeIndicatorsData[indicator].indicatorText);
$("#indicatorLink").attr("href", "https://dev21310.service-now.com/haloportal/?id=potential_indicator_summary&indicator_id="+indicatorSysId);
}
}
}
};
}]);
})();

Answer 1

I would suggest you to use Angular UI instead of bootstrap
https://angular-ui.github.io/bootstrap/