title: Loading one directive from another
body: <p>I have two custom directives, as shown below: <code>app1</code> and <code>app2</code>. <code>app2</code> should be shown only when I click on a specific button in <code>app1</code>. What's the best way I can achieve this?</p>
  
  <p>Here's my code:</p>
  
  <pre><code>module.directive('app1', function() {
      // Runs during compile
      return {
          restrict: 'E',
          link: function(scope, element, attrs,controller) {
              var filter = scope.getFilters(attrs.appname);
          },
          templateUrl: '../directives/filter/partials/filter.html' ,
          controller: "filterCtrl"
      };
  });
  
  module.module('app2').directive('dmView', function() {
      return {
          restrict: 'E',  
          controller: 'viewController',
          link: function(scope, element, attrs) {     
              var viewData = scope.getViewData(attrs.appname);
              var options = {
                  forceFitColumns: false,
                  enableColumnReorder: false
              }
            var grid;
            grid = new Slick.Grid('#myGrid', viewData.data, viewData.columns, options);
            scope.grid = grid;
          },
          templateUrl: '../directives/view/partials/view.html' 
      };
  });
  </code></pre>