JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="Controller as vm">
  <div parent parent-model="vm.model1"></div>
  <div parent parent-model="vm.model2"></div>
</div>

JavaScript

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

app.controller("Controller", Controller);

function Controller() {
	var vm = this;
  vm.model1 = "My Model 1";
  vm.model2 = "My Model 2";
}

app.directive("parent", parent);

function parent() {

  var parent = {
    controller: ["$scope", controller],
    replace: false,
    restrict: "A",
    scope: {
      parentModel: "="
    },
    template: '<h4>{{ parentModel }}</h4>'
  };

  return parent;

  function controller($scope) { 
    console.log($scope.parentModel);
  } 

}