Ons-carousel inside ons-dialog doesnt load first image

ceskomira90

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-carousel-item>
       
            </ons-carousel>
            <p>
                <ons-button modifier="clean" ng-click="hideDialog('dialog-3')">Close</ons-button>
            </p>
        </div>
    </ons-dialog>

</ons-template>