Grandchild directives

HTML

<div ng-app="app">
    <div class="parent" ng-controller="MainCtrl" ng-init="find()">
        <p>
            Steps: {{ myStepList }}             
        </p>
        
        <p>
            Items: {{ myItemList }}             
        </p>
        
        <p>
            Types: {{ myTypeList }}
        </p>
        
        <hr />
        
        <div>
            Directives with ng-repeat:
            
            <div ng-repeat="step in myStepList">                                
                <my-step-directive testfn="testfn()" my-item-list="myItemList" my-type-list='myTypeList' />
            </div>
        </div>
        
        <div>
            Test: <button ng-click="testfn()">Run (outside)</button>
        </div>
    </div>
</div>

CSS

.parent {
    border: 20px solid #676767;
    padding : 20px;
}
.parent,.directive {
    position: relative;
}
.parent:after,.directive:after {
    display: inline;
    color: #fff;
    font-size: normal;
    position: absolute;
    top:-20px;
    left:-20px;
    z-index: 100;
    padding: 1px 5px;
    background-color: rgba(0,0,0,0.5);
}
.parent:after {
    content: "MainCtrl Scope";
}
.directive {
    padding: 20px;
    border: 20px solid #cbccdd;
    margin-top: 20px;
}
.directive:after {
    content: "Directive Scope"
}
.line {
    border-bottom: 1px dotted #ccc;
    padding: 5px 0;
}

JavaScript

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

app.controller("MainCtrl", [
    '$scope', '$log', 'MyStepListAPI', 'MyTypeListAPI', 'MyItemListAPI'
    
    , function( $scope, $log, MyStepListAPI, MyTypeListAPI, MyItemListAPI )
    {
        var init = function()
        {
            $scope.myStepList = [];
            $scope.myItemList = [];
        	$scope.myTypeList = [];
        };
        
        $scope.testfn = function()
        {
            $log.debug('Test did start. Okay!');
        };

        $scope.find = function()
        {
			MyStepListAPI.list(function(data){
                $scope.myStepList = data;
            });
            
			MyItemListAPI.list(function(data){
                $scope.myItemList = data;
            });
            
			MyTypeListAPI.list(function(data){
                $scope.myTypeList = data;
            });
        };
        
        init();
	}
]);

app.factory('MyStepListAPI', [function(){
	return {
        list: function(nxt)
        {
            nxt([
                {
                    id: 1
                    , name: 'Step one'
                }
                ,{
                    id: 2
                    , name: 'Step two'
                }
            ]);
        }
    };
}]);

app.factory('MyItemListAPI', [function(){
	return {
        list: function(nxt)
        {
            nxt([
                {
                    id: 1
                    , name: 'Item A'
                }
                ,{
                    id: 2
                    , name: 'Item B'
                }
                ,{
                    id: 3
                    , name: 'Item C'
                }
            ]);
        }
    };
}]);


app.factory('MyTypeListAPI', [function(){
	return {
        list: function(nxt)
        {
            nxt([
                {
                    id: 1
                    , name: 'Type one'
                }
                ,{
                    id: 2
                    , name: 'Type two'
         ...