Edit in JSFiddle

customDirectives = angular.module('customDirectives', []);
customDirectives.directive('customModals', function () {
    return {
        restrict: 'A',
        require: '?ngModel',
        transclude: true,
        scope:{
            ngModel: '='
        },
        template: '<div id="{{modalId}}" class="modal fade">\
  <div class="modal-dialog">\
    <div class="modal-content">\
      <div class="modal-footer">\
        <button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>\
      </div>\
    </div>\
  </div>\
</div>',
        link: function(scope, el, attrs, transcludeFn){
            scope.modalId = attrs.modalId;
        }
    };
});

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.html"></div>
    </div>
</div>