title: How can directives be lazy loaded in angularjs?
body: <p>I'm working with  angularjs and I want to be able to load directives as and when they are needed instead of having all of them loaded at the start of the page. I'm trying to create directives for my most frequently used plugins. </p>
  
  <p>In this way, one direct can use <code>yepnope</code> to load all needed directives before finally compiling the html.</p>
  
  <p>If the directive is loaded at start of page with the others, everything works just fine. However if the 'child' directive is loaded later (within the 'parent'), it does not take effect. Below is the code for the pre field in the compile field of the 'parent' directive.</p>
  
  <pre><code>    ...
      var pre = function (scope, element, attrs) {
          element.html('Please wait. Loading...');
          ang.loadDirectives('caiDatePicker', function () {
              console.log('loaded');
              scope.data.raw = scope.rawData;
              var html = createObjUi(scope, scope.data, scope.defn);
              element.html(html); //data
              $compile(element.contents())(scope.$new());
              scope.$apply();
          });
      };
      return { restrict:'A', compile: {pre:pre,post:function(){...}};
  </code></pre>
  
  <p><code>ang.loadDirectives</code> loads the directive using yepnope. Part of the code for the 'child' directive is as follows:</p>
  
  <pre><code>angular.module('mycomponents') //PS: I'm assuming this will fetch the already created module in the 'parent' directive
  .directive('caiDatePicker', function ($parse) {
      return {
          scope: {},
          restrict: 'A',
          link: function (scope, element, attrs) {
              scope.$watch('this.$parent.editing', function (v) {
                  scope.editing = v;
              });
              yepnope({
                  test: $().datePicker,
                  nope: [
                      '/content/plugins/datepicker/datepicker.js', //todo: use the loader
                      '/content/plugins/datepicker/datepicker.css'
                  ],
                  complete: function () {
                      if (scope.model &amp;&amp; scope.model.value) {
                          var date = scope.model.value;
                          element.val(date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear());
                      }
                      element.datepicker({ weekStart: 1, format: 'dd/mm/yyyy' })
                          .on('changeDate', function (ev) {
                              scope.model.value = ev.date;
                              scope.$apply();
                          });
                  }
              });
              attrs.$observe('path', function (v) {
                  var fn = $parse(v);
                  var model = fn(scope.$parent);
                  scope.model = model;
              });
          }
      }
  });
  </code></pre>
  
  <p>Is what I'm doing even possible in the first place?</p>
  
  <p>If so, what am I doing wrong?</p>