JSFiddle - React, Tailwind, and code Playground

by Vikas

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<div ng-app='myApp'>
  <div ng-controller='myCtrl'>
    {{a}} and  {{b}}

    <div my-directive>
    </div>
    <div my-directive2>
    </div>

    <hr>
  </div>
</div>

JavaScript

angular.module('myApp', [])
  .controller("myCtrl", function($scope) {
    $scope.a = 55;
    $scope.b = 66;
  })
  .directive('myDirective', function() {
    return {
      template: '<div>{{a}} and {{b}}</div>',
      controller: function($scope) {
        $scope.a = 77
      }
    }
  }).directive('myDirective2', function() {
    return {
      template: '<div>{{a}} and {{b}}</div>',
      controller: function($scope) {
        $scope.b = 88
      }
    }
  });