twitter bootstrap - fullcalendar not visible until button is clicked or window resized?

Question

I'm using jquery full calendar with angularJS and angularstrap. The problem it seems is that the calendar will only display when I either click on one of the buttons in the calendar or resize the browser window. This calendar is being loaded in a modal box initialised using angularstrap.

I appreciate the help.

Plunkr here: LINK

Modal HTML is in search_modal.html Calendar controller is:calendarCtrl.js Parent controller is search.js

Edit: After experiencing the same problem with google maps and a gallery I've attempted to implement I dont think this is a problem directly related to the calendar rather its more related to the modal box itself. Anything thats interactive and involves javascript does not scale properly according to the size of the modal box. Anyone have any ideas on how to fix this?

Answer 1

Just to add another answer to this. I was using fullcalendar in a bootstrap tab. In order to render the calendar, I added:

$('a#id-of-tab').on('shown.bs.tab', function (e) {
    $("#the-calendar-container").fullCalendar('render');
});