Custom cell disable using value - Md-data-table - AngularJS

[arunmmanoharan]

I am displaying my data using md-data-table. I am displaying a custom cell where I display an icon. I need to disable the icon using ng-disabled if the value of showRepairIcon in my data returns false. How do I do that? I am trying all various ways but not able to achieve it. Please advice.

  <mdt-table id="current-table" table-card="{ title: 'Role Health', actionIcons: true }" mdt-row="{ 'data': healthData, 'table-row-id-key': 'id', 'column-keys': ['repair_rl_nm', 'rl_nm', 'score', 'mtch_cnt_defined_entlmnt', 'umtch_cnt_defined_entlmnt', 'mtch_cnt_outlier_entlmnt'] }" class="requesttype-table sorting-table">
    <mdt-header-row>
      <mdt-column align-rule="left" column-definition="Repair"><span>Repair</span></mdt-column>
      <mdt-custom-cell column-key="repair_rl_nm">
        <custom-cell-repair ng-disabled="showRepairIcon"></custom-cell-repair>
      </mdt-custom-cell>
      <mdt-column align-rule="left" column-definition="Role Name"><span>Job Role Name</span></mdt-column>
      <mdt-column align-rule="left" column-definition="Score"><span>Health Score</span></mdt-column>
      <mdt-custom-cell column-key="score"><span ng-class="{'score-cell green': value &gt;= 70 , 'score-cell red': value &lt;= 40, 'score-cell yellow': value &lt; 70 &amp;&amp; value &gt; 40}">{{value}}</span></mdt-custom-cell>
      <mdt-column align-rule="left" column-definition="Entitlements within Role with Assigned Users"><span>Entitlements within Job Role with Assigned Users</span></mdt-column>
      <mdt-column align-rule="left" column-definition="Entitlements within Role with No Users Assigned"><span>Entitlements within Job Role with No Users Assigned</span></mdt-column>
      <mdt-column align-rule="left" column-definition="Outlier Entitlements with Match % At or Above 60"><span>Outlier Entitlements with Match % At or Above 60</span></mdt-column>
    </mdt-header-row>
  </mdt-table>

This is my directive for the icon.

    app.directive('customCellRepair', function () {
            return {
                    template: '\
          <md-button class="md-icon-button md-primary" aria-label="Role Repair" \
            title="Role Repair" href="/RoleRepair/{{value}}"> \
            <ng-md-icon icon="build" size="24"> \
            </ng-md-icon> \
          </md-button>'
            };
    });

My data is as follows.

    [
      {
        "rl_nm": "Admin",
        "umtch_cnt_defined_entlmnt": "11",
        "mtch_cnt_defined_entlmnt": null,
        "mtch_cnt_outlier_entlmnt": "0",
        "health_score": "0",
        "showRepairIcon": true,
        "repair_rl_nm": "Admin"
      },
      {
        "rl_nm": "Report",
        "umtch_cnt_defined_entlmnt": "1",
        "mtch_cnt_defined_entlmnt": null,
        "mtch_cnt_outlier_entlmnt": "1",
        "health_score": "0",
        "showRepairIcon": true,
        "repair_rl_nm": "Report"
      },
      {
        "rl_nm": "Supervisor",
        "umtch_cnt_defined_entlmnt": "32",
        "mtch_cnt_defined_entlmnt": null,
        "mtch_cnt_outlier_entlmnt": "0",
        "health_score": "0",
        "showRepairIcon": true,
        "repair_rl_nm": "Supervisor"
      },
      {
        "rl_nm": "User",
        "umtch_cnt_defined_entlmnt": "1",
        "mtch_cnt_defined_entlmnt": null,
        "mtch_cnt_outlier_entlmnt": "0",
        "health_score": "0",
        "showRepairIcon": true,
        "repair_rl_nm": "User"
      }
    ]