JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <easy></easy>
  </body>

JavaScript

var app = angular.module('app', []);

var myServiceModule = angular.module('myServiceModule', []);

myServiceModule.service('MyService', function() {
  console.log('service');
  return {test: 'MyService'};
});


var myDirectiveModule = angular.module('myDirectiveModule', []);

myDirectiveModule.directive('easy', function(){
    return {
    template: 'Directive content {{name}}'
  };
});

app.requires.push('myServiceModule');
  
app.controller('MainCtrl', ['$scope','MyService',function($scope, MyService) {
  $scope.name = MyService.test;
}]);

//This doesn't work
//angular.bootstrap(document, ['app']);

app.requires.push('myDirectiveModule');
//This does work:
angular.bootstrap(document, ['app']);