JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js"></script>
<button id="startMeUp">Start Me Up!</button>

<div id="Foo">
  <div id="container">
      
  </div>
</div>

JavaScript

$("#startMeUp").click(function() {
// Make module Foo
angular.module('Foo', []);
// Make controller Ctrl in module Foo
angular.module('Foo').controller('Ctrl', function($scope) { 
    $scope.data = {};
    $scope.data.name = 'KDawg';
    $scope.destroy = function() {
        $scope.$destroy();
        $('#Ctrl').remove();
    };
    $scope.$on("$destroy", function () {
        console.log("EXTERMINATE");
    });
});
// Load an element that uses controller Ctrl
$('<div ng-controller="Ctrl" id="Ctrl"> ' +
  '<input type="text" ng-model="data.name"></input>' +
  '{{data.name}}' +
  '<button ng-click="destroy()">Destroy Me</button></div>').appendTo('#container');
// Bootstrap with Foo
angular.bootstrap($('#Foo'), ['Foo']);
});