Hide Angular Bootstrap modal instead of close

I am using Angular Bootstrap Modal to open a bunch of modals including video player inside

http://angular-ui.github.io/bootstrap/#/modal

I want to be able to keep where the video is at even if the modal is closed. It's just so next time I open the same modal again, I can see where I left off in the video.

In order to do that, I need to do:

1. Create each modal a separate instance

2. Instead of close(), I need to hide() the modal instead. Therefore the DOMs are still in there and the video player don't get re-created

What's the elegant way to do this as the Bootstrap modal has no hide feature. Should I just use jQuery to show/hide the .modal-backdrop and .modal classes?

From Don't destroy an Angular Bootstrap modal on close:

Why don't you abstract the modal state into its own service? That way, whenever the modal controller is created, it uses the service to setup the view state on initialisation.

Eg. create a service

.factory('ModalStateService', function(){
    var state = {
        someValue: 'something'
    };

    return {
        getState: function() { return state; }
    };
});

Then in your controller:

.controller('ModalCtrl', function($scope, ModalStateService){
    $scope.viewState = ModalStateService.getState();
});

Then in your modal content view for example:

 <span>{{viewState.someValue}}</span>

If you were then to set someValue inside your modal, say through an input, the service state would be updated. Then when you create and destroy your modal, the state will persist.