[Service Portal] - Widget with modal behavior embedded in another widget

[Vic Albergaria]

Hello, everyone.
I have two widgets, one that is just a button where when I click I activate a function that embeds another widget on the page that should behave like a modal.
The problem is that it only works when I click on it once, if I close the modal widget, it won't open anymore.
What is the easiest way to make an embedded widget behave like a modal?
I think I have to pass information between widgets and perhaps use $('#custom_modal_01').modal('show'); and $('#custom_modal_01').modal('hide');. But I'm not sure, does anyone have any ideas?

Widget one (Button) -HTML:

<button type="button" ng-click="c.openOrCloseModal()">open or close modal</button>
<sp-widget widget="c.myCustomModal"></sp-widget>

Widget one (Button) -Client:

api.controller=function(spUtil) {
	/* widget controller */
	var c = this;

	c.openOrCloseModal = function(){
		spUtil.get("custom_modal_01").then(function(response) {
			c.myCustomModal = response;
		});
	}
};

Widget two (Modal) -HTML:

<!-- /ONLY CONTAINS BOOTSTRAP MODAL -->
<div id="custom-modal"  class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Widget two (Modal) -Client:

api.controller=function() {
  /* widget controller */
  var c = this;
  $('#custom-modal').modal('show');
};