Making div show outside Angular UI Modal

Question

In this plunk I have an Angular UI modal with a div that's inside the modal, but since it has position:fixed I'm expecting the div to be outside and cover the entire screen. Why is it inside the modal and how to make this work? Note that the div has to be inside the modal.

HTML

<style>
  .app-modal .modal-dialog {
      width: 260px;
      height:100px;
    }
  div#background {
      position:fixed;
      top:0;
      left:0;
      height:100%;
      width:100%;
      background-color:orange;
  }
</style>

<script type="text/ng-template" id="myModalContent.html">
    <div id="background"></div>
     Some text in the div
</script>

Answer 1

Based on our comment discussion, I'm following up with an answer.

As mentioned in the above comment, fixing the height and width of your initial container element, expands the div to the whole screen.

The remaining problem of a 'border' around the div is because of a border set by the framework on the modal. You can go around that by setting

margin: 0;

on the modal-dialog class.

Here's an updated plunker:

http://plnkr.co/edit/ycuD0OU8PRj5j4qiZnDw?p=preview