angular-bootstrap modal template not displaying on first open() when using templateCache

You may have encountered this issue where the angular-bootstrap modal template doesn't display the first time you call open().

$scope.open = function (size) {

            var modalInstance = $modal.open({

                animation: $scope.animationsEnabled,

                templateUrl: 'my-modal.html',

                controller: 'MyModalCtrl',

                size: size,

                resolve: {

                    items: function () {

                        return $scope.items;

                    }

                }

            });

You also have this as your html template

<div>

    <script type="text/ng-template" id="my-modal.html">

        <div class="modal-header">

            <h3 class="modal-title">Remove this item?</h3>

        </div>

        <div class="modal-body">

            Are you sure you want to remove <b>{{ item.name }}</b>

        </div>

        <div class="modal-footer">

            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>

            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>

        </div>

    </script>

</div>

The trick here is to just remove the <script></script>  tags.

Hope that helps!  :)