Why ng-map angular directive doesn't work when modals open ? (in plunker)

Question

My Angular Module:

I used ng-map directive, I entered the coordinates here:

angular.module('ngMap').controller('mapCtrl', function ($scope) {
    //Open Modal Function
    $scope.open = function() { //Open Modal Function
        $('#warningModal').modal('show');
    }
    $scope.vm={data:[],position:[]};
    $scope.vm.data = [
      { foo: 1, bar: 1 },
      { foo: 2, bar: 2 },
      { foo: 3, bar: 3 },
      { foo: 4, bar: 4 },
      { foo: 5, bar: 5 },
      { foo: 6, bar: 6 },
      { foo: 7, bar: 7 }
    ];
    $scope.vm.positions = [
      { pos: [40.71, -74.21] },
      { pos: [40.72, -74.20] },
      { pos: [40.73, -74.19] },
      { pos: [40.74, -74.18] },
      { pos: [40.75, -74.17] },
      { pos: [40.76, -74.16] },
      { pos: [40.77, -74.15] }
    ];
});

HTML:

I used two style, first in html map, second in modal map. Map worked in html but, other not run.

<div ng-controller="mapCtrl">

<button class="btn btn-default" ng-click="open()">Open map!</button>

<div id="warningModal" class="modal fade">
    <div class="modal-dialog  modal-sm" style="padding-top: 40px;">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="panel-title" id="voteLabel"><span class="glyphicon glyphicon-remove"></span></h4>
            </div>
            <div class="modal-body">
                <ng-map zoom="11" center="[40.74, -74.18]">
                    <marker ng-repeat="p in vm.positions"
                            position="{{p.pos}}"
                            data="{{data[$index]}}"
                            on-click="showData()" 
                            title="pos: {{p.pos}}"></marker>
                </ng-map>
            </div>
        </div>
    </div>
</div>
<ng-map zoom="11" center="[40.74, -74.18]">
    <marker ng-repeat="p in vm.positions"
            position="{{p.pos}}"
            data="{{data[$index]}}"
            on-click="showData()" ;
            title="pos: {{p.pos}}"></marker>
</ng-map>

Plunker Link: http://embed.plnkr.co/LHzOQL930BqVco6gQhqX/

Answer 1

It seems the map in the modal does not get initialized because the modal has display: none; at first. After adding this css:

.modal {
  display: block;
  z-index: -1;
}

.modal.fade.in {
  z-index: 1050;
}

the map in modal appears.