Automatically added ng-hide in a button - angularjs

Question

<table>
<tr ng-repeat="response in customUserResponse">
<td>
<div class="buttons" align="center">
<button ng-disabled="isReadOnly" class="btn actionBtn edit-disable"
ng-click="editResponse($index)"><i class="fa fa-edit"></i></button>
<button ng-show="!response.Is_Global__c"
ng-model="response.Is_Global__c" ng-
disabled="isReadOnly" class="btn actionBtn edit-disable"
ng-click="deleteQuestion($index)">
<i class="fa fa-trash"></i></button>
</div>
</td>
</tr>
</table>
<table class="table" style="margin-top: 10px;">
<tr>
<td>
<button ng-disabled="isReadOnly" class="btn actionBtn"
ng-click="addUserRow()">
<i class="fa fa-plus"></i></button>
</td>
</tr>
</table>
$scope.addUserRow = function () {
var l = $scope.customUserResponse.length;
if(l==0)
{
l = $scope.customUserQuestion.length;
}
var quest = {Question_Text__c:"", Response_Value__c:"", Status__c:"", Comments__c:"",
Is_Global__c:"false", Order__c:l};
$scope.enabledEditResponse[l] = true;
$scope.customUserResponse.push(quest);
//var element = document.getElementByClass("deleteButton");
//element.classList.remove("ng-hide");
//angular.element(document.querySelector("#deleteButton")).removeClass("ng-hide");
//$scope.showDeleteBtn = true;
//$scope.$apply();
};
$scope.submitQuestion = function() {
var data = [];
if($scope.customUserResponse.length >= $scope.customUserQuestion.length)
data = data.concat($scope.customUserResponse);
else {
data = data.concat($scope.customUserQuestion);
data = data.concat($scope.customUserResponse);
}
data.forEach(function(element) { element.Application_Id__c = $scope.appId; });
var len = data.length;
for(var i=0; i<len;i++){
data[i].Order__c = i+1;
}
ApplicationDataSource.saveFundingChecklistResponse(angular.toJson(data), function (result) {
if(result[0] !='{\"error\": true, \"result\": null}')
{
$scope.getResponse($scope.loadResponseInTable);
alert('Data saved Successfully');
$scope.resetEnabledEditResponse();
//$scope.init();
}
else
{
alert('Something went wrong. Data is not saved.');
}
$scope.$apply();
});
};
When response.Is_Global__c == false, the delete button will show.
When I clicked plus button one row is added but the delete button doesn't show. But after saving both button shows. When I inspect the code, I see ng-hide is automatically added in the class and if I remove manually the ng-hide class then the button shows.

Answer 1

ng-hide class is added when ng-show expression evaluates to a falsy value:
This means that after the save action this expression becomes false:
!response.Is_Global__c
The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element.
https://docs.angularjs.org/api/ng/directive/ngShow