JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<div data-ng-app="customPage">
  <script id='/form.html' type='text/ng-template'>
    <form data-ng-show='pageState.showAdminControls' data-ng-submit='submit()' id='page-form'>
      <i>the text input below is read-only</i><br />
      <input type='text' ng-model="widget.name"/>
      <input type='submit' value='Submit'>
    </form>
    <hr/>
  </script>

  <!-- form for CMS -->
  <div data-ng-view></div>
  
  <!-- dynamic CMS-driven content -->
  <div data-ng-controller='CustomPageCtrl'>
    <div data-ng-show='pageState.showAdminControls'>
      <a href="#/widget/new">New Widget</a>
    </div>
    <div id='page-content'>
      <div data-widget='1'>
        <h1>Widget 1</h1>
        <ul data-ng-show='pageState.showAdminControls'>
          <li><a href='#/widget/1/edit'>Edit</a></li>
          <li><a href='javascript:void(0)' data-delete-widget='1'>Delete</a></li>
        </ul>
      </div>
      <div data-widget='2'>
        <h1>Widget 2</h1>
        <ul data-widget='2' data-ng-show='pageState.showAdminControls'>
          <li><a href='#/widget/2/edit'>Edit</a></li>
          <li><a href='javascript:void(0)' data-delete-widget='2'>Delete</a></li>
        </ul>
      </div>
    </div>

    <div>
      <a href="javascript:void(0)" data-ng-click='pageState.showAdminControls = !pageState.showAdminControls'>
        {{ pageState.showAdminControls ? 'Hide' : 'Show' }} Admin Controls
      </a>
    </div>
  </div>
</div>

JavaScript

(function() {
  var customPage, genHtml, widgetCount = 2;

  genHtml = function() {
    var html = '', id;
    html += "<div>Reloaded " + Date() + "</div>";
    for (id = 1; id <= widgetCount; ++id) {
      html += "<div data-widget='" + id + "'><h1>Widget " + id + "</h1><ul data-ng-show='pageState.showAdminControls'><li><a href='#/widget/" + id + "/edit'>Edit</a></li><li><a href='javascript:void(0)' data-delete-widget='" + id + "'>Delete</a></li></ul></div>";
    }
    return html;
  };

  customPage = angular.module('customPage', []);

  customPage.config(function($routeProvider) {
    $routeProvider.when('/', {
      controller: 'CustomPageCtrl',
      template: ''
    }).when('/widget/new', {
      controller: 'PageEditCtrl',
      templateUrl: '/form.html'
    }).when('/widget/:id/edit', {
      controller: 'PageEditCtrl',
      templateUrl: '/form.html'
    });
  });

  customPage.factory('PageState', function() {
    return {
      showAdminControls: false
    };
  });

  customPage.controller('CustomPageCtrl', function($scope, $http, $location, PageState) {
    $scope.pageState = PageState;
  });

  customPage.directive('deleteWidget', function($http, $location, $timeout) {
    return function(scope, element, attrs) {
      var id = attrs.deleteWidget;
      return element.bind('click', function() {
        $timeout(function() {
          var widget_element;
          widget_element = angular.element('[data-widget=' + id + ']');
          widget_element.remove();
          widgetCount -= 1;
          $location.path('/');
        }, 100);
        scope.$digest();
      });
    };
  });

  customPage.controller('PageEditCtrl', function($scope, $http, $routeParams, $location, $route, $compile, PageState, $timeout) {
    var widgetId = $routeParams.id || widgetCount + 1;

    $scope.pageState = PageState;
    $scope.widget = { id: widgetId, name: 'Widget ' + widgetId };
    $scope.submit = function() {
      if ($scope.widget.id > widgetCount) widgetCount +=...