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>

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Ons-carousel inside ons-dialog doesnt load first image