Angularjs UI grid not checking ng-show condition when row gets updated

Question

I am using angularjs ui grid, I have field called status in my code, where user can update the status to either Active or InActive by clicking on button.

After update I am able to refresh the data, but celltemplate: condition is not getting fired. I am using below method to refresh ui grid

$scope.gridOption.data=data;
$scope.gridOptionApi.core.refresh();

but this is only refreshing my data, its not checking the condition which I have added in celltemplete which is as below

 {field: 'profileId', displayName: 'Change Status',cellTemplate:'<div class="text-center">
<button ng-click="grid.appScope.changeProfileStatus(COL_FIELD, \'InActive\' )" ng-show={{row.entity.status==\'Active\'}} 
class="btn-custome-warn custom-btn-xs  btn-warning"><i class="fa fa-close"></i></button><button 
ng-click="grid.appScope.changeProfileStatus(COL_FIELD, \'Active\')" ng-show={{row.entity.status==\'InActive\'}} 
class="btn btn-xs btn--small custom-btn-xs button--primary"><i class="fa fa-check"></i></button></div>'}

so basically I am showing change status field where if the status is active then I am showing button for Inactive it and vice versa.

Anyone any suggestions please?

here is plunker i tried to create to show u demo, but status here I am now updating manually to show you else I have api call for updating it, if you see data is changing but status change buttons are not changing Demo

Answer 1

Got plunker to work by changing ng-show={{row.entity.status==\'Active\'}}

to ng-show="row.entity.status==\'Active\'"

Reason being anything inside {{ }} is executed inside the template immediately so you can see generated html has ng-show="true" but not an expression like

ng-show="row.entity.status=='Active'"