how to nest directives created as separate modules

Question

i like to compartmentalize my files and modules. so gist of what's going on with the code below is i'm using an angular directive to create a datatable that will list departments. what i'm trying to get to happen is be able to nest another directive in the datatable for each row that displays some buttons that will get wired up to some events and be fed some parameters. right now doesn't load/respond/do anything. can i accomplish this nesting of directives declared in separate modules? additionally, is the directive going to call forth the template for every row, and is this a bad design?

primary module file. houses the controller

angular.element(document).ready(function () {
    "use strict";

    var deptApp = angular.module('deptApp', ['possumDatatablesDirective','EditDeleteRowControls']);

    function DepartmentCtrl(scope, http) {
        scope.depts = [];

        scope.columnDefs = [
        { "mData": "Id", "aTargets": [0], "bVisible": false },
        { "mData": "Name", "aTargets": [1] },
        { "mData": "Active", "aTargets": [2] },
        { "mDataProp": "Id", "aTargets": [3], "mRender": function (data, type, full) {
            return '<row-controls></row-controls>';
        }
        }
        ];



        http.get(config.root + 'api/Departments').success(function (result) {
            scope.depts = result;
        });
    };

    DepartmentCtrl.$inject = ['$scope', '$http'];

    deptApp.controller('DepartmentCtrl', DepartmentCtrl);

    angular.bootstrap(document, ['deptApp']);
});

second module

// original code came from here http://stackoverflow.com/questions/14242455/using-jquery-datatable-with-angularjs
// just giving credit where it's due.

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

possumDTDirective.directive('possumDatatable', ['$compile', function ($compile) {
    "use strict";
    function Link(scope, element, attrs) {
        // apply DataTable options, use defaults if none specified by user
        var options = {};
        if (attrs.possumDatatable.length > 0) {
            options = scope.$eval(attrs.possumDatatable);
        } else {
            options = {
                "bStateSave": true,
                "iCookieDuration": 2419200, /* 1 month */
                "bJQueryUI": false,
                "bPaginate": true,
                "bLengthChange": true,
                "bFilter": true,
                "bSort": true,
                "bInfo": true,
                "bDestroy": true,
                "bProcessing": true,
                "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    $compile(nRow)(scope);
                }
            };
        }

        // Tell the dataTables plugin what columns to use
        // We can either derive them from the dom, or use setup from the controller           
        var explicitColumns = [];
        element.find('th').each(function (index, elem) {
            explicitColumns.push($(elem).text());
        });
        if (explicitColumns.length > 0) {
            options["aoColumns"] = explicitColumns;
        } else if (attrs.aoColumns) {
            options["aoColumns"] = scope.$eval(attrs.aoColumns);
        }

        // aoColumnDefs is dataTables way of providing fine control over column config
        if (attrs.aoColumnDefs) {
            options["aoColumnDefs"] = scope.$eval(attrs.aoColumnDefs);
        }


        // apply the plugin
        scope.dataTable = element.dataTable(options);

        // if there is a custom toolbar, render it.  will need to use toolbar in sdom for this to work
        if (options["sDom"]) {
            if (attrs.toolbar) {
                try {
                    var toolbar = scope.$eval(attrs.toolbar);
                    var toolbarDiv = angular.element('div.toolbar').html(toolbar);
                    $compile(toolbarDiv)(scope);
                } catch (e) {
                    console.log(e);
                }
            }

            if (attrs.extraFilters) {
                try {
                    var filterBar = scope.$eval(attrs.extraFilters);
                    var filterDiv = angular.element('div.extraFilters').html(filterBar);
                    $compile(filterDiv)(scope);
                } catch (e) {
                    console.log(e);
                }
            }
        }
        // this is to fix problem with hiding columns and auto column sizing not working
        scope.dataTable.width('100%');




        // watch for any changes to our data, rebuild the DataTable
        scope.$watch(attrs.aaData, function (value) {
            var val = value || null;
            if (val) {
                scope.dataTable.fnClearTable();
                scope.dataTable.fnAddData(scope.$eval(attrs.aaData));
            }
        }, true);

        if (attrs.selectable) {

            // respond to click for selecting a row
            scope.dataTable.on('click', 'tbody tr', function (e) {
                var elem = e.currentTarget;
                var classes = foo.className.split(' ');
                var isSelected = false;

                for (i = 0; i < classes.length; i++) {
                    if (classes[i] === 'row_selected') {
                        isSelected = true;
                    }
                };


                if (isSelected) {
                    scope.dataTable.find('tbody tr.row_selected').removeClass('row_selected');
                    scope.rowSelected = false;
                }
                else {
                    scope.dataTable.find('tbody tr.row_selected').removeClass('row_selected');
                    elem.className = foo.className + ' row_selected';
                    scope.selectedRow = scope.dataTable.fnGetData(foo);
                    scope.rowSelected = false;
                }
            });
        }
    };


    var directiveDefinitionObject = {
        link: Link,
        scope: true, // isoalte the scope of each instance of the directive.
        restrict: 'A'
    };

    return directiveDefinitionObject;
} ]);

third module

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

function EditDeleteRowControlsDirective() {
    "use strict";

    var ddo = {
        templateUrl: config.root + 'AngularTemplate/RowEditDeleteControl',
        restrict: 'E'
    };

    return ddo;
};


EditDeleteRowControls.directive('rowControls', EditDeleteRowControlsDirective);