JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <foo-directive data="'abc'" ctrl="FirstCtrl"></foo-directive>
</div>

CSS

</style>
<script src="//code.angularjs.org/1.6.2/angular.min.js"></script>
<style>

JavaScript

function FirstCtrl() {
	this.name = 'First Controller';
  console.log("debugging " + this.data);
}

function fooDirective() {
	return {
  	scope: {
    	data: '='
    },
    controller: 'FirstCtrl',
    controllerAs: 'foo',
    bindToController: true,
    template: '<div>{{ foo.name }} {{foo.data}}</div>',
    link: function ($scope, $element, $attrs, $ctrl) {
    	console.log($ctrl.name);
      
      this.$onInit = function() {
      	console.log('Data: ', this.data);
      };
    }
  };
}

angular
	.module('app', [])
  .directive('fooDirective', fooDirective)
  .controller('FirstCtrl', FirstCtrl)