title: Angular JS reloading whole body when clicked on Other Tabs
body: <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/URoLi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/URoLi.png" alt="Bootstrap Tabs"></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"&gt;&lt;/script&gt;
  &lt;script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"&gt;&lt;/script&gt;
  
  
  &lt;div class="container" -ng-controller="incidentSummaryCtrl" &gt;
      &lt;div class="panel panel-primary"&gt;
          &lt;div class="panel-heading"&gt;&lt;h3&gt;Incident  {{c.data.incidentData[0].incidentId}} &lt;/h3&gt; &lt;/div&gt;
          &lt;div class="panel-body" style="padding:0px"&gt;
              &lt;div class="panel-group"&gt;
  
  
                  &lt;div class="container"&gt;
                      &lt;div class="row text-center"&gt;
                          &lt;h1 class="white"&gt;&lt;/h1&gt;
                      &lt;/div&gt;
  
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-10"&gt;
                              &lt;div class="tab" role="tabpanel"&gt;
                                  &lt;!-- Nav tabs --&gt;
                                  &lt;ul class="nav nav-tabs" role="tablist"&gt;
                                      &lt;li role="presentation" class="active"&gt;&lt;a href="#Section1" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="true"&gt;Incident Information&lt;/a&gt;&lt;/li&gt;
                                      &lt;li role="presentation" class=""&gt;&lt;a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab" aria-expanded="false"&gt;Potential Indicators&lt;/a&gt;&lt;/li&gt;
                                      &lt;li role="presentation" class=""&gt;&lt;a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab" aria-expanded="false"&gt;Course of Action&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                                  &lt;!-- Tab panes --&gt;
                                  &lt;div class="tab-content"&gt;
                                      &lt;div role="tabpanel" class="tab-pane fade active in" id="Section1"&gt;
                                                                              &lt;div class="col-md-3 col-xs-3"&gt;
                                         &lt;p&gt;&lt;label&gt;First Name: &lt;/label&gt; {{c.data.incidentData[0].firstName}}    &lt;/p&gt;
                                          &lt;p&gt;&lt;label&gt;Last Name: &lt;/label&gt; {{c.data.incidentData[0].lastName}}      &lt;/p&gt;
                                          &lt;p&gt;&lt;label&gt;Email: &lt;/label&gt; {{c.data.incidentData[0].email}}      &lt;/p&gt;
                                          &lt;p&gt;&lt;label&gt;Telephone Number: &lt;/label&gt; {{c.data.incidentData[0].telephoneNumber}}      &lt;/p&gt;
                                          &lt;p&gt;&lt;label&gt;Reported Date:  &lt;/label&gt; {{c.data.incidentData[0].createdDate}}   &lt;/p&gt;
                                          &lt;p&gt;&lt;label&gt;Last Updated:  &lt;/label&gt; {{c.data.incidentData[0].lastUpdated}}   &lt;/p&gt;  
                                        &lt;/div&gt;
  
                                          &lt;div class="col-md-3 col-xs-3"&gt;
                                          &lt;p&gt;&lt;label&gt;Incident #: &lt;/label&gt; {{c.data.incidentData[0].incidentId}}    &lt;/p&gt;
                                          &lt;p&gt;&lt;label&gt;Status: &lt;/label&gt; {{c.data.incidentData[0].incidentStatus}}      &lt;/p&gt;
                                          &lt;p&gt;&lt;label&gt;Category: &lt;/label&gt; {{c.data.incidentData[0].incidentType}}      &lt;/p&gt;
                                          &lt;p&gt;&lt;label&gt;Organization:  &lt;/label&gt; {{c.data.incidentData[0].organization}}   &lt;/p&gt;
                                          &lt;p&gt;&lt;label&gt;Department:  &lt;/label&gt; {{c.data.incidentData[0].department}}   &lt;/p&gt;
                                          &lt;p&gt;&lt;label&gt;Assigned To:  &lt;/label&gt; {{c.data.incidentData[0].assignedTo}} &lt;/p&gt;
                                        &lt;/div&gt;
  
                                          &lt;div class="col-md-12 col-xs-12"&gt;
                                          &lt;p&gt;&lt;label for="notes"&gt;Notes:&lt;/label&gt;   &lt;/p&gt;
                                          &lt;textarea class="form-control" rows="5" id="notes" ng-readonly="true"&gt;{{c.data.incidentData[0].note}}&lt;/textarea&gt;
                                        &lt;/div&gt;
  
                                      &lt;/div&gt; &lt;!-- End of Section1 --&gt;
  
  
                                      &lt;div role="tabpanel" class="tab-pane fade" id="Section2"&gt;
                                          &lt;label&gt;Extracted Potential Indicators&lt;/label&gt;
                                          &lt;table class="table table-condensed table-hover table-bordered"&gt;
                                              &lt;thead&gt;
                                              &lt;tr&gt;
                                                  &lt;th&gt;No&lt;/th&gt;
                                                  &lt;th&gt;Ranking&lt;/th&gt;
                                                  &lt;th&gt;Indicator&lt;/th&gt;
                                                  &lt;th&gt;Status&lt;/th&gt;
                                              &lt;/tr&gt;
                                              &lt;/thead&gt;
                                              &lt;tbody&gt;
                                              &lt;tr ng-repeat="indicator in c.data.indicatorsData track by $index" &gt;
                                                  &lt;td&gt;{{indicator.number}}&lt;/td&gt;
                                                  &lt;td&gt;{{indicator.urgencyRanking}}&lt;/td&gt;
                                                  &lt;td&gt;{{indicator.indicatorText}}&lt;/td&gt;
                                                  &lt;td class="{{indicator.cssClass}}"&gt;&lt;a href="https://dev21310.service-now.com/haloportal/?id=potential_indicator_summary&amp;indicator_id={{indicator.sysId}}" data-toggle="tooltip" data-placement="top" title="Click here to see more information"&gt;{{indicator.indicatorStatus}}&lt;/a&gt;&lt;/td&gt;
                                              &lt;/tr&gt;
                                              &lt;/tbody&gt;
                                          &lt;/table&gt;
                                      &lt;/div&gt; &lt;!-- End of Section2 --&gt;
  
  
                                      &lt;div role="tabpanel" class="tab-pane fade" id="Section3"&gt;
                                          &lt;p&gt;&lt;label&gt;Recommendation: &lt;/label&gt; {{c.data.courseOfActionsData[0].recommendedName}}   &lt;/p&gt;
                                          &lt;p&gt;&lt;label&gt;Reasoning: &lt;/label&gt; {{c.data.courseOfActionsData[0].reasoning}}  &lt;/p&gt;
  
                                          &lt;p&gt;&lt;label&gt;Select Course of Action: &lt;/label&gt;
                                              &lt;select class="form-control" id="sel1" ng-model="selectedValue"  style="max-width:700px"&gt;
                                                  &lt;option ng-repeat="coa in c.data.ListOfCourseOfActionsData track by $index" value="{{coa.name}}" ng-selected="{{defaultvalue == c.data.courseOfActionsData[0].recommendedName}}"&gt;{{coa.name}}&lt;/option&gt;
                                              &lt;/select&gt; &lt;/p&gt;
  
                                          &lt;p&gt;&lt;label&gt;Additional Actions: &lt;/label&gt;   &lt;/p&gt;
                                          &lt;div id="actions"&gt;
                                              &lt;label class="checkbox-inline"&gt;&lt;input type="checkbox" value="" id="sendEmailUpdateToReporter"&gt;Send Email Update to Reporter&lt;/label&gt;
                                              &lt;label class="checkbox-inline"&gt;&lt;input type="checkbox" value="" id="notifyIsp" ng-model="notifyIsp"&gt;Notify ISP&lt;/label&gt;
                                              &lt;label class="checkbox-inline"&gt;&lt;input type="checkbox" value="" id="notifyDomainRegistrar" ng-model="notifyDomainRegistrar"&gt;Notify Domain Registrar&lt;/label&gt; &lt;br/&gt;
                                              &lt;label class="checkbox-inline"&gt;&lt;input type="checkbox" value="" id="sendEmailReceipt"&gt;Send Email Receipt to Reporter&lt;/label&gt;
                                              &lt;label class="checkbox-inline"&gt;&lt;input type="checkbox" value="" id="setStatusOfTicketToResolved"&gt;Set Status of Ticket Resolved
                                              &lt;/label&gt;
                                              &lt;label class="checkbox-inline"&gt;&lt;input type="checkbox" value="" id="notifyProduction"&gt;Notify Production&lt;/label&gt;&lt;br/&gt;
                                              &lt;label class="checkbox-inline"&gt;&lt;input type="checkbox" value="" id="resolveAndCloseTicket"&gt;Resolve and Close Ticket&lt;/label&gt;
                                              &lt;label class="checkbox-inline"&gt;&lt;input type="checkbox" value="" ng-model="checked" id="assignToGroup"&gt;Assign to Group&lt;/label&gt;
                                              &lt;br/&gt;
                                          &lt;/div&gt; &lt;br/&gt;
  
  
                                          &lt;div class="row"&gt;
  
                                              &lt;div id="assignment" class="col-md-4"&gt;
                                                  &lt;b&gt;Group Name:&lt;/b&gt;
                                                  &lt;select  id="groupSelectedValue" ng-model="groupSelectedValue"  style="max-width:700px"    class="form-control"&gt;
                                                      &lt;option value="Tier1"&gt;Tier1&lt;/option&gt;
                                                      &lt;option value="Tier2"&gt;Tier2&lt;/option&gt;
                                                      &lt;option value="Tier3"&gt;Tier3&lt;/option&gt;
                                                      &lt;option value="Tier4"&gt;Tier4&lt;/option&gt;
                                                      &lt;option value="Tier5"&gt;Tier5&lt;/option&gt;
                                                      &lt;option value="Halo Administrator"&gt;Halo Administrator&lt;/option&gt;
                                                  &lt;/select&gt;
                                              &lt;/div&gt;
  
                                              &lt;div class="col-md-4"&gt;
                                                  &lt;b&gt;Assign To:&lt;/b&gt;
                                                  &lt;select  id="assignTo" ng-model="assignTo"    style="max-width:700px"  class="form-control" &gt;
                                                      &lt;option  ng-repeat="user in (c.data.groupUsers | filter: {'groupName':groupSelectedValue}) track by $index" value="user.name"&gt;{{user.name}}&lt;/option&gt;
                                                  &lt;/select&gt;
                                              &lt;/div&gt;
  
                                          &lt;/div&gt;
                                          &lt;br/&gt;
  
                                      &lt;div id="commentsSection" &gt;
                                          &lt;div class=""&gt;
                                           &lt;span ng-hide="c.data.incidentData[0].incidentStatus == 'Closed'"&gt;
                                             &lt;b&gt;Comments:&lt;/b&gt;  &lt;textarea id="comments"  class="form-control"  ng-model="comments"&gt; &lt;/textarea&gt; &lt;br/&gt;
                                           &lt;/span&gt;
                                          &lt;/div&gt;
                                          &lt;br/&gt;
  
                                          &lt;div class=""&gt;
                                              &lt;b&gt;Comments History: &lt;/b&gt;
                                              &lt;table class="table table-responsive"&gt;
                                                  &lt;thead&gt;
                                                  &lt;tr&gt;
                                                      &lt;th&gt;Comment &lt;/th&gt;
                                                      &lt;th&gt;Entered Date &lt;/th&gt;
                                                      &lt;th&gt;Entered By &lt;/th&gt;
                                                  &lt;/tr&gt;
                                                  &lt;/thead&gt;
                                                  &lt;tbody&gt;
                                                  &lt;tr ng-repeat="text in c.data.commentshistory track by $index"&gt;
                                                      &lt;td&gt;{{text.comment}}&lt;/td&gt;
                                                      &lt;td&gt;{{text.enteredDate}}&lt;/td&gt;
                                                      &lt;td&gt;{{text.enteredBy}}&lt;/td&gt;
                                                  &lt;/tr&gt;
                                                  &lt;/tbody&gt;
  
                                              &lt;/table&gt;
                                              &lt;button type="button" class="btn btn-primary" ng-click="execute()"&gt;Execute&lt;/button&gt;
                                              &lt;input type="hidden" id="sysId" value="{{sysId}}"&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt; &lt;!-- End of Section3 --&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt; &lt;!-- End of Container --&gt;
  
  
  
  
          &lt;/div&gt; &lt;!--End of Panel Group --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Angular JS Code:</p>
  
  <pre><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&amp;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&amp;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&amp;indicator_id="+indicatorSysId);
                      }
                  }
  
              }
  
  
          };
  
      }]);
  
  })();
  </code></pre>