Angular UI Bootstrap Modal strips id and class attributes

Question

Live Example

Adding the following Angular UI Bootstrap Modal:

<div id="my-id" class="my-class" modal="opened">
  <p>Modal Here</p>
</div>

results in:

<div class="modal ng-scope">
  <p>Modal Here</p>
</div>

Why the id and class attributes are stripped?

I would like to set some CSS styling on the dialog, e.g. dialog's width, or styling some dialog's inner elements. How could I achieve that?

Answer 1

Here's the github issue explaining why the id is being stripped.

As for the class, I'm not sure why's that stripped, but you can use $dialog options to specify the class (which will fix your issue):

<div id="my-id" modal="opened" options="{dialogClass: 'modal my-class'}">
  <p>Modal Here</p>
</div>