JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="ctrl">

  <div id="dialogoverlay"></div>
  <div id="dialogbox">
      <div>
          <div id="dialogboxhead"></div>
          <div id="dialogboxbody"></div>
          <div id="dialogboxfoot"></div>
      </div>
  </div>

</div>

JavaScript

var app = angular.module('app', [])

app.controller('ctrl', function($scope, $compile) {

  var html = '<div><button ng-click = "cancelAlert()" > Cancel</button > <button ng-click="continueAlert()">Continue</button></div>';
  var div = $compile(html);
  var content = div($scope);
  
  document.getElementById('dialogboxhead').innerHTML = "header";
  document.getElementById('dialogboxbody').innerHTML = "body";
  document.getElementById('dialogboxfoot').append( content[0] );
});