title: how to nest directives created as separate modules
body: <p>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?</p>
  
  <p>primary module file. houses the controller</p>
  
  <pre><code>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 '&lt;row-controls&gt;&lt;/row-controls&gt;';
          }
          }
          ];
  
  
  
          http.get(config.root + 'api/Departments').success(function (result) {
              scope.depts = result;
          });
      };
  
      DepartmentCtrl.$inject = ['$scope', '$http'];
  
      deptApp.controller('DepartmentCtrl', DepartmentCtrl);
  
      angular.bootstrap(document, ['deptApp']);
  });
  </code></pre>
  
  <p>second module</p>
  
  <pre><code>// 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 &gt; 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 &gt; 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 &lt; 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;
  } ]);
  </code></pre>
  
  <p>third module</p>
  
  <pre><code>var EditDeleteRowControls = angular.module('EditDeleteRowControls', []);
  
  function EditDeleteRowControlsDirective() {
      "use strict";
  
      var ddo = {
          templateUrl: config.root + 'AngularTemplate/RowEditDeleteControl',
          restrict: 'E'
      };
  
      return ddo;
  };
  
  
  EditDeleteRowControls.directive('rowControls', EditDeleteRowControlsDirective);
  </code></pre>