Controller runs multiple time on click of item in angularjs? - angularjs

Question

In web app i am showing list of items using ng-repeat directive of angularjs. And on-click of each item am assigning a summary controller to the summary page (using ui-routing) and shows the result. Currently what happens if there is 10 list items showed using ng-repeat then 10 times summary controller is getting initialized on click of one item. Eventually which makes my app bit slow. Here is my ng-repeat code in html.
<div class="surveyList" ng-repeat="survey in allSurveys | filter:headerObj.search track by $index">
<span class="surveycheckbox" ng-click="toggleClass($event)"></span>
<div class="toogleSurvey row" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" ng-click="surveyIdForQuota(survey.SurveyID)">
<div class="col-xs-5 col-sm-2 col-md-4 surveyitleElipse">{{survey.SurveyName}}</div>
<div class="col-xs-5 col-sm-2 col-md-1">
<span class="title_thumb">
<span class='fa fa-mobile-phone' ng-show="survey.Type=='App'" title="APP" my-Tooltip />
<span class='fa fa-envelope-o' ng-show="survey.Type=='SMS'" title="SMS" my-Tooltip />
<span class='fa fa-desktop' ng-show="survey.Type=='Web'" title="WEB" my-Tooltip/>
</span>
</div>
<div class="col-sm-3 col-md-2 hidden-xs">{{survey.Date | date:'dd/mm/yyyy'}}</div>
<div class="col-sm-2 col-md-2 hidden-xs SurveyLastChild">124</div>
<div class="hidden-xs surveyListTool" ng-show="hoverEdit">
<a class="editSurvey" title="edit"><i class="fa fa-pencil fa-2"></i></a>
<a class="deleteSurvey" ng-click="sendsurveyID(survey.SurveyID)" data-surveyID="{{survey.SurveyID}}" ><i class="fa fa-trash-o fa-2"></i></a>
<a class="cloneSurvey" ng-click="cloneSurvey(survey.SurveyID)" title="clone"><i class="fa fa-clone fa-2"></i></a>
<a class="menuSurvey" title="menu">
<i class="fa fa-circle fa-2"></i>
<i class="fa fa-circle fa-2"></i>
<i class="fa fa-circle fa-2"></i>
</a>
</div>
</div>
<!-- On click Of the list am showing this div box -->
<div class="surveyDetailsBox"> <!--This is the header section -->
<div class="surveyDetailHead">
<p class="surveyTitle">{{survey.SurveyName}}</p>
<div class="surveyDetailHeadTool" >
<a class="editSurvey" title="edit" ng-click="showEditSurveyForm(survey.SurveyID,$index);"><i class="fa fa-pencil fa-2"></i></a>
<a class="deleteSurvey hidden-xs" ng-click="sendsurveyID(survey.SurveyID)" ><i class="fa fa-trash-o fa-2"></i></a>
<a class="menuSurvey" title="menu">
<i class="fa fa-circle fa-2"></i>
<i class="fa fa-circle fa-2"></i>
<i class="fa fa-circle fa-2"></i>
</a>
<a class="hidden-xs" title="close"><i class="fa fa-angle-up fa-2"></i></a>
</div>
</div>
<!--This is the body section where summary and other modules are present -->
<div class="surveyDetailContent hidden-xs" ng-if="is_desktop">
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="col-xs-2 col-sm-2 col-md-2 leftMenu">
<div class="list-group">
<a ui-sref="survey.surveyList.details" class="list-group-item summary" ui-sref-active="active">Summary</a>
<a ui-sref="survey.surveyList.questionare" class="list-group-item " ui-sref-active="active">Questionaire Management</a>
<a ui-sref="survey.surveyList.sampleManagement" class="list-group-item " ui-sref-active="active">Sample Management</a>
<a ui-sref="survey.surveyList.quotaManagement" class="list-group-item " ui-sref-active="active">Quota Management</a>
<a ui-sref="survey.surveyList.scheduling" class="list-group-item " ui-sref-active="active">Scheduling</a>
<a ui-sref="survey.surveyList.notification" class="list-group-item " ui-sref-active="active">Notifications</a>
<a ui-sref="survey.surveyList.reports" class="list-group-item " ui-sref-active="active">Reports</a>
<a ui-sref="survey.surveyList.location" class="list-group-item " ui-sref-active="active">Geolocation</a>
</div>
</div>
<div class="col-xs-10 col-sm-10 col-md-10 rightContent" ui-view></div>
</div>
</div>
</div>
For each sub module like Summary, questionnare etc., one controller is associated.
On click of this list am showing the summary box and running the controller also.
Code for surveyIdForQuota() goes here
$scope.surveyIdForQuota = function(SurveyID){
$rootScope.quotaSurveyID = SurveyID;
$scope.exportViewDetails="";
$http.get(__env.apiUrl+"/UserSurvey/GetInvitationCount?surveyId="+$rootScope.surveysummaryID,{headers:{"Content-type":"application/json",'sessionID':$rootScope.token}}).
then(function(response){
console.log(response);
$scope.summaryDetails = response.data;
},function(error){console.log(error)})
};

Answer 1

ng-click should be add on the item of list
<div class="surveyList" ng-repeat="survey in allSurveys |filter:headerObj.search track by survey.SurveyID"> <div ng-
click="surveyIdForQuota(survey.SurveyID)">)">//rest code inside goes here</div></div>
Your first div is a parent div, but you wrote ng-click on the list. So if you click any place of the div. it will be call the method