JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular-aria.js"></script>
<!-- application container -->
<div ng-app="app">

  <!-- directive view template -->
  <script type="text/ng-template" id="foobar.html">
    <div class="row">
      <div class="col-md-12">
        <label for="foobar_{{::$id}}">label for foobar_{{::$id}}</label>
        <span class="label label-danger"></span>
        <br/>
        <textarea id="foobar_{{::$id}}" auto-height type="text" class="form-control" ng-model="model.foobar" placeholder="id : foobar_{{::$id}}"></textarea>
        <br/>
        <strong>Model21:</strong> {{model}}

      </div>
    </div>
  </script>
  
   <!-- directive view template -->
  <script type="text/ng-template" id="foobar2.html">
    <div class="row">
      <div class="col-md-12">
        <label for="foobar_{{::$id}}">label for foobar_{{::$id}}</label>
        <span class="label label-danger"></span>
        <br/>
        <textarea id="foobar_{{::$id}}" auto-height type="text" class="form-control" ng-model="model.foobar" placeholder="id : foobar_{{::$id}}"></textarea>
        <br/>
        {{dummerController.tester}}
        <strong>Modesl2:</strong> {{model}}

      </div>
    </div>
  </script>

  <foobar-directive></foobar-directive>
  <br/>
  <foobar-directive></foobar-directive>
  <br/>
  <foobar-directive></foobar-directive>
  <br/>
  <label>test</label>
  
   <foobar-directive2></foobar-directive2>
  <br/>
  <foobar-directive2></foobar-directive2>
  <br/>
  <foobar-directive2></foobar-directive2>
  <br/>
  <foobar-directive2></foobar-directive2>

</div>

JavaScript

angular
  .module('app', [])
  .directive('foobarDirective', foobarDirective)
  .controller('testController', testController)
  .component('foobarDirective2', foobarDirective2())
/* directive */
function foobarDirective() {
  var directive = {
    templateUrl: 'foobar.html',
    scope: {
      model: '='
    },
    restrict: 'E'
  };
  return directive;

}


/* directive */
function foobarDirective2() {
  var directive = {
    templateUrl: 'foobar2.html',
    bindings: {
      test: '='
    },
        controller: 'testController',
      controllerAs: 'dummerController',
  };
  return directive;

}

function testController() {
	this.tester = 'tester';
}