asyncmodule.js

define([
    '/path/to/a/dependency'
], function(myDependcy) {
    
    var module = angular.module('asyncModule', [myDependency.name]);
    
    module.directive('asyncDirective', ['$http'', function($http) {
        
        return {
            link: function(scope, element, attrs) {
                
                ... Do stuff in our directive ...        
            
            }
        }
        
    }]);
    
    return module;
})

parentDirective.js

define([
    
], function() {
    
    var module = angular.module('mainApp');
    
    module.directive('parentDirective', ['$ocLazyLoad', function($ocLazyLoad) {
        
        return  {
            link: function(scope, element, attrs) {
                
                // This method called from user interaction
                scope.loadAsyncModule = function () {
                    var self = this;
                    $ocLazyLoad.load({
                        name: 'asyncModule',    //Same name as defined in asyncmodule.js
                        files: ['/path/to/asyncdirective.js']   
                    })
                    .then(function() {
                        
                        //Our module is now fully loaded, we can use it as we would any other module
                    });
                }
            };
        }
    }]);
    
    return module;
}) ;