Ons-carousel inside ons-dialog doesnt load first image

  • I have a simple ons-carousel that opens when i load the ons-dialog. All work perfectly but when i load the firs image of my ons-caorusel it seems that something goes wrong and the image is not loaded. I tried to use the function setActiveCarouselItemIndex(index) but nothing changes.
    Here my code and my demo.
    My list:


    my first touch on the selected item:

    my second touch after the second selected item:

    If i click in the second image at the button close (the white one) when the image is not loaded, for a while it seems to see the image loaded. so only when i click at the button dialog.hide();

    I tried to load it when tha dialog is opened, but continue to give me the same result

    What i can do? how to use the variable $watch in this case?
    Thanks in advice

    This is my code:

    <ons-template id="dialog.html">
        <ons-dialog  style="width: 100%; height: 80%;" id="dialog-3" ng-controller="postEventoController" >
            <div   style="text-align: center; padding: 10px;">
                <ons-carousel   swipeable overscrollable auto-scroll auto-refresh fullscreen var="carousel"  >
                    <ons-carousel-item    ng-repeat="attachments in item.attachments" >
                        <img class="immagine-eventi-sx" ng-src="{{  attachments.url}}">
                    <ons-button modifier="clean" ng-click="hideDialog('dialog-3')">Close</ons-button>