JSFiddle - React, Tailwind, and code Playground

by Roger Sanchez

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<link rel="stylesheet" href="https://rawgit.com/nohros/nsPopover/master/example/nsPopover.css">
<body ng-app="ScotiApp">
  <div ng-controller="MainController">
    <div>
      <button ng-click="addForm(0)">Form One</button>
      <button ng-click="addForm(1)">Form Two</button>
      <button ng-click="addForm(2)">Form Three</button>
    </div>

    <div ng-repeat="form in displayedForms track by $index">
      <ng-include src="form"></ng-include>
    </div>

    <script type="text/ng-template" id="form1.tpl.html">
      <label>
        Form one is an input: <input type="text" />
      </label>
    </script>

    <script type="text/ng-template" id="form2.tpl.html">
      <label>
        Form two gives you choices: <input type="radio"/> <input type="radio"/>
      </label>
    </script>

    <script type="text/ng-template" id="form3.tpl.html">
      <button>Form three is a button</button>
    </script>
  </div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
<script src="http://rawgit.com/nohros/nsPopover/master/src/nsPopover.js"></script>

JavaScript

var ScotiApp = angular.module('ScotiApp', ['nsPopover', 'ui.sortable']);

ScotiApp.controller('MainController', function($scope, $timeout) {

  var forms = [
    "form1.tpl.html",
    "form2.tpl.html",
    "form3.tpl.html",
  ];

  $scope.displayedForms = [];

  $scope.addForm = function(formIndex) {
    $scope.displayedForms.push(forms[formIndex]);
  }




});