JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js"></script>
<div ng-controller="Test">
    <div barchart data="dataset" type="vertical">
         <bartemplate>
            <span class="text">eh</span>
            <bar></bar>
          </bartemplate>
        Hey there!
    </div>
</div>

JavaScript

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

AppDirectives.controller('Test', function( $scope ){
    $scope.dataset = [{ label : 'eh', value : 55}, { label : '232', value : 23}];
    
});
    
AppDirectives.controller('ChartController', function( $scope ){
     // .... blah blah
     $scope.bars = [];

          
}).directive('barchart', function( $compile, $timeout ){
    return {
        scope : {
            barData : '=data',
            type     : '@type'
        },
        require: 'barchart',
        replace : true,
        transclude : true,
        template : ''.concat(
            '<div xmlns="http://www.w3.org/2000/svg">',
                '<div class="chart-inner" ng-transclude></div>',
            '</div>'
        ),
        controller :'ChartController',
        priority : 99,
    }
}).directive('bartemplate', function( $compile ){
  
    return {
        require : '^barchart',
        restrict: 'E',
        controller : function ($scope, $element, $attrs) {},
        scope : {},
        template : '<div ng-repeat="bar in bars track by $index" ng-transclude></div>',
        replace : true,
        transclude : true,
        link : function( scope, element ){
            // For demo purposes ...
            scope.bars = [{ label : 'eh', value : 55}, { label : '232', value : 23}];
        }
    }
});