javascript - AngularJS: function seems to be firing multiple time -

i building employee directory , changed way contentctrl function works in attempt make angular routes more flexible.

old code

//the contentctrl function drives main body of app, uses active id pull relevant json file file structure      //it breaks json file apart based on labled "primary", "seconday", , "tertiary" these teammates placed       //arrays labled based on thier position data field, use angular populate page      //so manager of program in primary, use item in primary , item.fname etc pull program manager page      //we use item in secondary pull in next person (assistant manager) , use item in tertiary      //pull in of teammates remaining in department      $scope.contentctrl = function(id) {          $scope.active = [];          $scope.activetwo = [];          $scope.primary = [];          $scope.secondary = [];          $scope.tertiary = [];          $scope.credits = [];          $http.get('assets/json/' + id + '.json').then(function(response) {              $scope.active = response.data;              //loops through json file , pulls out primary,secondary, , tertiary employees              (var = 0; < $scope.active.length; i++) {                  if ($scope.active[i].layout == "primary") {                      $scope.primary.push($scope.active[i]);                  } else if ($scope.active[i].layout == "secondary") {                      $scope.secondary.push($scope.active[i]);                  } else {                      $scope.tertiary.push($scope.active[i]);                  }              }            });          $http.get('assets/json/credits.json').then(function(response) {              $scope.activetwo = response.data;              (var = 0; < $scope.activetwo.length; i++) {                  $scope.credits.push($scope.activetwo[i]);              }            });        };

new code

$scope.contentctrl = function(id) {          console.log(id);          $rootscope.activeid = id;          $rootscope.active = [];          $rootscope.activetwo = [];          $rootscope.primary = [];          $rootscope.secondary = [];          $rootscope.tertiary = [];          $rootscope.credits = [];          $http.get('assets/json/' + $rootscope.activeid + '.json').then(function(response) {              $scope.active = response.data;              //loops through json file , pulls out primary,secondary, , tertiary employees              (var = 0; < $scope.active.length; i++) {                  if ($scope.active[i].layout == "primary") {                      $scope.primary.push($scope.active[i]);                  } else if ($scope.active[i].layout == "secondary") {                      $scope.secondary.push($scope.active[i]);                  } else {                      $scope.tertiary.push($scope.active[i]);                  }              }              });          $http.get('assets/json/credits.json').then(function(response) {              $scope.activetwo = response.data;              (var = 0; < $scope.activetwo.length; i++) {                  $scope.credits.push($scope.activetwo[i]);              }            });          };

and here html using function display employees

<!-- sets primary teammate via function located in controller.js file please view file description of how function works, once function done ul places teammate labeled primary position in top left of screen (determined css, can moved), image, name, , position done through ng repeat , image ng-click pass teammate in image modal pops up.       1) page loads      2) controller splits json file 3 arrays primary, secondary, , tertiary      3) use angular to pull these arrays (item in primary)       4) item in primary instance andy johnson, item.fname andy, item.lname johnson. these data fields defined in json file each department      5) image, when clicked, calls function modalpass() , gives parameter item, in instance andy johnsons json data      6) modalpass() function saves whatever passed in (item aka andy johnson) object called teammateinfo, hence on line 55 use teammate info.fname instead of item.fname -->          <ul class="primary">              <li ng-repeat="item in primary">                  <a ng-click="modalpass(item)" data-toggle="modal" data-target="#teammatemodal" /> <img class="directoryimg" ng-src={{item.image}}></a>                  <h4>{{item.fname}} {{item.lname}}</h4>                  <h4>{{item.pos}}</h4>              </li>          </ul>          <ul class="secondary">              <li style="width: 220px; margin-right:80px;" ng-repeat="item in secondary">                  <a ng-click="modalpass(item)" data-toggle="modal" data-target="#teammatemodal" /> <img class="directoryimg" ng-src={{item.image}}></a>                  <h4>{{item.fname}} {{item.lname}}</h4>                  <h4>{{item.pos}}</h4>              </li>          </ul>          <ul class="tertiary">              <li ng-class="sizecheck(tertiary.length)" class="col-lg-1" ng-repeat="item in tertiary">                  <div style="position: relative; left: 0; top: 0;">                      <a ng-click="modalpass(item)" data-toggle="modal" data-target="#teammatemodal" /> <img class="directoryimg" ng-src={{item.image}}>                      <img ng-if="item.bob != 'false'" class="bob" src="./assets/images/icons/svg/bob.svg">                      <img ng-if="item.tce != 'false'" class="tce" src="./assets/images/icons/svg/tce.svg"></a>                      <img ng-if="item.gsc != 'false'" class="gsc" src="./assets/images/icons/svg/gsc.png"></a>                  </div>                  <h4 style="line-height:1;">{{item.fname}} {{item.lname}}<br>{{item.pos}}</h4>              </li>          </ul>

this made work poor solution, new angular , javascript know shouldn't use global variables unless absolutely needed, open part of function. isn't current problem. problem having when put in console log seems calling function 3-4 times. don't have errors makes me uncomfortable because can't understand why behaving way. can explain if normal or me find solution if bug in code.