Edit in JSFiddle

customDirectives = angular.module('customDirectives', []);
customDirectives.directive('customModals', function ($http, $compile) {
    return {
        restrict: 'A',
        transclude: true,
        scope:{
            ngModel: '='
        },
        template: '',
        link: function(scope, el, attrs){
            scope.modalId = attrs.modalId;
            scope.title = attrs.modalTitle;
        
            $http.jsonp(attrs.modalSrc);
        
            getContents = function(data){
                $compile(data.contents)(scope, function(compliledElement, scope){
                    el.append(compliledElement);
                });
            };
    }
}});

angular.module('CustomComponents', ['customDirectives']);

<div ng-app="customDirectives">
    <div>
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>
        <div custom-modals modal-id="myModal" modal-title="Our Compiled Modal" modal-src="http://subliminalsources.com/wp-content/uploads/2014/08/modal-example.js"></div>
    </div>
</div>