onsen-ui :set active carousel item to 0 (menu of sliding-menu with list of carousel)

Question

I have a sliding-menu with a menu having a list, each list have a carousel of two items. I want the first carousel item to show after closing the menu then reopening it, and after clicking the button that shows in the menu page but outside the list.

this is what i have:

<ons-template id="menu.html">
         <ons-page>
            <span style = "text-align:center;width:30dp;margin:25%;">Presentations</span>
            <ons-list id ="list"  style="padding:0px;" ng-controller="ItemController">

            <ons-list-item ng-repeat="item in local" style="padding:0;">
              <ons-carousel  swipeable auto-scroll auto-refresh initial-index="0" style="height: 100%;width: 100%; position: absolute;">
                <ons-carousel-item style="padding:0;">
                  <ons-button modifier = "quiet" ng-click="menu.close();customSetMainPage(item.id);">
                    {{item.name}}
                  </ons-button>
                </ons-carousel-item>
                <ons-carousel-item style ="text-align: center;">
                  <ons-button ng-click="deletepresentation(item.id);local.splice($index, 1);" >
                        Remove
                        <ons-icon icon="ion-trash-a"/>
                  </ons-button>
                </ons-carousel-item>
              </ons-carousel>
            </ons-list-item>
          </ons-list>

            <p>
               <ons-button modifier = "small" style="margin-left: 25%;"  id = "add"
                  onclick="
                  addPresentation();
                  menu.closeMenu();
                  if (runtime.diaginit == false) {
                  runtime.diaginit=true;
                  ons.createDialog('dialog.html').then(function(dialog) {dialog.show();});}
                  else {dialog.show();}
                  "
                  >
                  new  presentation 
               </ons-button>
            </p>
         </ons-page>
      </ons-template>

EDIT :

I tried to proceed like This. This line angular.element(document.getElementById('list')).scope().itemToDefault(); blocks my app with this error showing

undefined is not a function (evaluating '$scope.carousel[index].first()')

ons.ready(function() {
           menu.setMainPage('first.html');
           menu.on('postclose', function() {
            ons.compile(document.getElementById("carousel"));

          });
           menu.on('preclose', function() {
                angular.element(document.getElementById('list')).scope().itemToDefault();

          });
      });


var application = angular.module('app', ['onsen']);
application.controller('ItemController',function($scope){
    $scope.local = [];
    $scope.itemToDefault = function (){
            var c = $scope.carousel;
            for (var index in $scope.carousel) {
                if( $scope.carousel.hasOwnProperty( index ) ) {
                     $scope.carousel[index].first(); 
                } 
            }
        };

    });

Answer 1

You need to "name" your carousels to be able to access them: <ons-carousel var="carousel.{{$index}}" ...>. Then you need something like this to restore every carousel to its first index:

for (var index in $scope.carousel) {
  if( $scope.carousel.hasOwnProperty( index ) ) {
    $scope.carousel[index].first();
  } 
}

Just call that every time you need. Before or after the action of the button in the menu and also on postclose or preopen events of the Sliding Menu (mySlidingMenu.on('postclose', restore_all_carousels)).

Hope it helps!