HTML ng-if doesn't work

[syamano]

Hi,

I want to show HTML widget depend on Incident state in Service Portal.

So I cloned HTML widget and write script below:

HTML Temple

<div>
  <div ng-if="!c.options.html && data.canRead" class="panel panel-default">
    <div class="panel-body">
      <b>${HTML Widget}</b><br>
      ${Ctrl + Click > Options to set HTML content}
    </div>
  </div>
  <div ng-if="c.options.html" ng-bind-html="c.html"></div>
</div>

Client Script (Not changed from default.)

function ($scope, $sce) {
	var c = this;
	c.html = $sce.trustAsHtml(c.options.html);
	$scope.$watch('c.options.html',function(){
		c.html = $sce.trustAsHtml(c.options.html);
	})
}

Server Script

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
	var tableName = $sp.getParameter('table');
	var sysId = $sp.getParameter('sys_id');
	var record = sn_std_tkt_api.TicketConfig.getTicketRecord(tableName, sysId);
	var state = record.getValue('state');
	data.canRead = false;

	if(tableName == 'incident' && state == '7'){
		data.canRead =true;
	}else{
		return;
	}

})();

However, It doesn't work. The widget is still visible.

Please tell me how I should write it.

Regerds,