Angularjs directive ng-hide in cell template is not binding on change in grid data

Question

Angular directive ng-hide in cell template is not binding with latest data on change in grid data. Please check plunkr for more details :- http://plnkr.co/edit/rj0PrfyzeyVeV8Q8RWtG?p=preview In plunker template field is not updating with change in data.

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', function ($scope, $timeout) {
  $scope.gridOpts = {        
        columnDefs: [
          { name:'name', field: 'name' },
          { name:'isActive', field: 'isActive'},
          { name:'template',cellTemplate:'<div><a ng-hide={{row.entity.isActive=="Y"}}>Active</a><a ng-hide={{row.entity.isActive=="N"}}>Deactive</a></div>'}
        ]
  };

  $scope.waiting = "Waiting...";
  $timeout(function () {
    $scope.gridOpts.data = [{ name: 'Bob' ,isActive:'Y'}];
  }, 3000)
  .then(function() {
    $timeout( function() {
      $scope.gridOpts.data = [{ name: 'John',isActive:'N' }];
    }, 3000);
    $scope.waiting = "Waiting again...";
  })
});

Answer 1

you need a expression inside the ng-hide

The ngHide directive shows or hides the given HTML element based on the expression provided to the ngHide attribute.

so your ng-hide should be like

..ng-hide=row.entity.isActive=="Y"..

not like this interpolation,

.. ng-hide={{row.entity.isActive=="Y"}}..

here is the updated DEMO