How can I display Angular content in UI Grid cells?

Question

Using UI Grid, I know that I can define HTML and Angular content in a cellTemplate that will apply to all rows on a per-column basis.

But how can I display arbitrary HTML and compiled Angular content in UI Grid cells on a per-row basis? In other words, each row needs to be able to define its own HTML/Angular content, so I can't just define it in the cellTemplate.

I can get it to work with HTML content like this:

  var data = [
    {
      Col1: $sce.trustAsHtml("<b>Some HTML {{row1}}</b>"),
      Col2: $sce.trustAsHtml("<b>Some HTML {{row1}}</b>")
    },
    {
      Col1: $sce.trustAsHtml("<i>Some Different HTML {{row2}}</i>"),
      Col2: $sce.trustAsHtml("<i>Some Different HTML {{row2}}</i>")
    }
  ];

  $scope.row1 = 1;
  $scope.row2 = 2;

  $scope.gridOptions = {
    columnDefs: [
      {name: "Col1", cellTemplate: "<span ng-bind-html='COL_FIELD'></span>"},
      {name: "Col2", cellTemplate: "<span ng-bind-html='COL_FIELD'></span>"}],

    data: data
  };

But {{row1}} and {{row2}} are not resolving, and I'm not sure how to get it to compile the Angular content (aside from $compiling on a render event, I guess).

Plunker