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:

    0_1474281427183_1.JPG

    my first touch on the selected item:
    0_1474281483114_2.JPG

    my second touch after the second selected item:
    0_1474281517574_3.JPG

    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>