I have performance issues in AngularJS. After analyzing it from the AngularJS Batarang i could identify the issues with lots of watchers being created. Below is the code snippet which is the culprit for performance optimization.
<table>
<tr>
<td style="padding:10px; width:20%">Response Summary: </td>
<td style="padding: 15px; width: 80%">
<textarea class="form-control" rows="4" name="Response_Summary" ng-model="_sAResponses.sA_Response.sA_Response_Summary" disabled></textarea>
</td>
</tr>
<tr>
<td style="padding: 10px; width: 20%">Remarks: <label style="color: red;">*</label> </td>
<td style="padding: 15px; width: 80%"> <textarea class="form-control" rows="4" name="Response_Remark" ng-model="_sAResponses.validator_Comment" ng-disabled=" _sAResponses.sA_Response.sA_Response_Status_Key == 8 || _sAResponses.sA_Response.sA_Response_Status_Key == 9 || _sAResponses.sA_Response.sA_Response_Status_Key == 19" style="text-align:left" required></textarea></td>
</tr>
<tr>
<td></td>
<td style="padding:15px"><button type="button" class="btn btn-default" ng-click="toggleAllRemarks(_sAResponses)">All Validator Remarks</button></td>
</tr>
<tr>
<td colspan="2" style="padding:10px">
<div>
<table style="width:100%" border="1">
<tr>
<th colspan="3">
<center>Supporting Artifacts Details</center>
</th>
</tr>
<tr>
<th>Note</th>
<th>Ticket number</th>
<th>File Name</th>
</tr>
<tr ng-repeat="evidences in ::_sAResponses.sA_Response.sA_Supporting_Evidences">
<td>{{::evidences.sA_Supp_Evidence_Short_Note}}</td>
<td>
{{::evidences.sA_Supp_Evidence_Ticket_Number}}
</td>
<td><a href="{{ ::Url }}/Admin/api/SAValidateResponse?_Evidence_Key={{::evidences.sA_Supp_Evidence_Key}}">{{::evidences.evidence_file_name}}</a></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="padding: 10px; width: 20%">
<div ng-show="PageMode == 'SelfAssessmentValidateResponse'">
Upload Validator Document:
</div>
</td>
<td style="padding: 15px; width: 80%">
<div ng-show="PageMode == 'SelfAssessmentValidateResponse'">
<input type="file" class="form-control" ng-disabled="_sAResponses.validator_file_name || _sAResponses.sA_Response.sA_Response_Status_Key == 8 || _sAResponses.sA_Response.sA_Response_Status_Key == 9 " onchange="angular.element(this).scope().selectedFile(this)" />
</div>
</td>
</tr>
<tr>
<td>
<div style="padding: 10px; width: 20%">
<div ng-show="_sAResponses.validator_file_name!=null">
Validator Document:
</div>
</div>
</td>
<td>
<div ng-show="PageMode == 'SelfAssessmentValidateResponse'">
<div ng-show="_sAResponses.validator_file_name!=null" style="padding-left:15px">
<a href="{{ Url }}/Admin/api/SAValidateResponse?_Responsekey={{::_sAResponses.sA_Resp_Validator_Type_Map_Key}}">{{::_sAResponses.validator_file_name}}</a>
<span ng-show="(_sAResponses.member_Key == memberkey) && (_sAResponses.sA_Response.sA_Response_Status_Key == 10 || _sAResponses.sA_Response.sA_Response_Status_Key == 17 || _sAResponses.sA_Response.sA_Response_Status_Key == 18)">
<a ng-click="onDeleteValidatorUpload(_sAResponses)" href="">
<span class="glyphicon glyphicon-remove" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Delete">
</span>
</a>
</span>
</div>
</div>
<div ng-show="PageMode == 'ManageEscalation'">
<div ng-show="_sAResponses.validator_file_name!=null" style="padding-left:15px">
<a href="{{ ::Url }}/Admin/api/SAValidateResponse?_Responsekey={{::_sAResponses.sA_Resp_Validator_Type_Map_Key}}">{{::_sAResponses.validator_file_name}}</a>
</div>
</div>
</td>
</tr>
<tr>
<td style="padding: 10px; width: 20%"> Status: <label style="color: red;">*</label></td>
<td style="padding: 15px; width: 80%">
<div ng-show="PageMode == 'SelfAssessmentValidateResponse'">
<select class="form-control" id="StatusDropDown1" name="StatusDropDown" ng-model="_sAResponses.validation_status_key" ng-disabled="_sAResponses.sA_Response.sA_Response_Status_Key == 8 || _sAResponses.sA_Response.sA_Response_Status_Key == 9 " ng-change="ddlstatuschange(_sAResponses.validation_status_key)" ng-options="s.sA_Response_Status_Key as s.sA_Response_Status_Name for s in _sAResponses.sA_Response.all_Sa_Response_Status">
<option value="">--Select Status--</option>
</select>
</div>
<div ng-show="PageMode == 'ManageEscalation'">
<select class="form-control" id="StatusDropDown2" name="StatusDropDown" ng-model="manageEscalateStatus">
<option value="">--Select Status--</option>
<option value="11">Response Rejected</option>
<option value="8">Revised Response Sought</option>
</select>
</div>
</td>
</tr>
<tr>
<td colspan="5" style="padding:10px">
<center>
<div ng-show="PageMode == 'SelfAssessmentValidateResponse'">
<div ng-show="_sAResponses.validation_status_key == undefined">
<button type="button" class="btn btn-default" ng-disabled="!ResponseForm.Response_Remark.$valid ||!ResponseForm.StatusDropDown.$valid || _sAResponses.sA_Response.sA_Response_Status_Key == 8 || _sAResponses.sA_Response.sA_Response_Status_Key == 9" ng-click="updateResponse(_sAResponses,_sAResponses.validation_status_key,'save')">
Save
</button>
</div>
<div ng-show="_sAResponses.validation_status_key != undefined">
<button type="button" class="btn btn-default" ng-disabled="!ResponseForm.Response_Remark.$valid || !ResponseForm.StatusDropDown.$valid || _sAResponses.sA_Response.sA_Response_Status_Key == 8 || _sAResponses.sA_Response.sA_Response_Status_Key == 9" ng-click="updateResponse(_sAResponses,_sAResponses.validation_status_key,'validate')">Validate</button>
</div>
</div>
<div ng-show="PageMode == 'ManageEscalation'">
<div ng-show="manageEscalateStatus == '' || manageEscalateStatus == undefined">
<button type="button" class="btn btn-default" ng-disabled="!ResponseForm.Response_Remark.$valid ||!ResponseForm.StatusDropDown.$valid || _sAResponses.sA_Response.sA_Response_Status_Key == 8 || _sAResponses.sA_Response.sA_Response_Status_Key == 9" ng-click="updateResponse(_sAResponses,manageEscalateStatus,'save')">
Save
</button>
</div>
<div ng-show="manageEscalateStatus != undefined">
<button type="button" class="btn btn-default" ng-show="manageEscalateStatus != ''" ng-disabled="!ResponseForm.Response_Remark.$valid ||!ResponseForm.StatusDropDown.$valid || _sAResponses.sA_Response.sA_Response_Status_Key == 8 || _sAResponses.sA_Response.sA_Response_Status_Key == 9" ng-click="updateResponse(_sAResponses,manageEscalateStatus,'validate')">Validate</button>
</div>
</div>
</center>
</td>
</tr>
</table>
Below is the screenshot of Batarang
How can i optimize the above code?
