Putting an Open Layers OSM Map in a Modal

<!doctype html>
<html ng-app="myApp">
  <head>
    <!-- Third Party Scripts -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
    <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
    
    <!-- Application script -->
    <script type="text/javascript" src="myController.js"></script>
    <script src="script.js"></script>
    
    <!-- Stylesheets -->
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="myController">
  <div><p>A modal containing a map should appear before your very eyes.</p></div>
  <div><button class="btn" ng-click="openModal()">Open Modal</button></div>
  <div modal="showModal" close="close()" options="opts">
        <div class="modal-header">
            <h4>I'm a modal!</h4>
        </div>
        <div class="modal-body" style="text-align : center;">
            <div id="map" style="width: 500px; height: 300px; display : inline-block;" class="map"></div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-warning cancel" ng-click="close()">Cancel</button>
        </div>
  </div>
</div>
  </body>
</html>

// ng-app
angular.module('myApp', ['ui.bootstrap']);

/* empty class needed for below div */
.map
{

}

/* this fixes the bootstrap conflict for how images are displayed */
/* Twitter, you owe me a Sunday */
.map img
{
    max-width:none;
}

var myController = function ($scope)
{
    $scope.showModal = false;
    
    $scope.openModal = function (){
      $scope.showModal = true;
   
   $scope.renderMap = function ()
    {
        var map = new OpenLayers.Map('map');
        var lonlat = new OpenLayers.LonLat(-71,42);
        
        var osmLayer       = new OpenLayers.Layer.OSM();
        var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
        var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
        var position       = new OpenLayers.LonLat(-71,42).transform( fromProjection, toProjection);
        var zoom           = 7;
 
        map.addLayer(osmLayer);
        map.setCenter(position, zoom );
         
        // Important to use render function. 
        map.render('map');
    };

      // This hack-like thing allows the modal DOM to render before applying
      // the OpenLayer map.
      $scope.DOMReady = function (f){
            window.setTimeout(f,0);
      }($scope.renderMap);
    };
    
    $scope.close = function () {
        $scope.showModal = false;
    };

};