JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="superApp">
    <div ng-controller="testCntrl">
        <row theme="spring">
            <cell ng-repeat="data in rowData" repeat-done="rowDone()"></cell>
        </row>
    </div>
</div>

JavaScript

var app = angular.module('superApp', []);
    app.controller('testCntrl', function($scope){

    });
    app.directive('row', function(){
        return{
            controller:function($scope){
                $scope.rowData = ["raj", "kamal", "10", "20"];
                $scope.rowDone = function(){
                    console.log($scope)
                }
            },
            restrict:"E",
            link:function(scope, el, attrs){

            }
        }
    })
    app.directive('cell', function(){
        return{
            restrict:"E",
            link:function(scope, el, attrs){
                //console.log(scope)
            }
        }
    })
    app.directive('repeatDone', function(){
        return{
            restrict:"A",

            link:function(scope, el, attrs){
                if(scope.$index+1 == scope.rowData.length){
                    scope.rowDone();
                }
            }
        }
    })