Sync item in switchable layouts on grid and list in ionic framework

I had made a swtichable layout (grid or list) in ionic.

http://codepen.io/WilsonFpz/pen/jPYqBq

   <a class="" ng-class="{active: layout == 'list'}" ng-click="layout = 'list'">List</a>
   <a class="" ng-class="{active: layout == 'grid'}" ng-click="layout = 'grid'">Gird</a>

As you can see in the codepen, user can choose the layout to show items (~100 in the case).

But there are some problem about sync when scrolling item and it caused bad UX. enter image description here

As you can see in the attachment image, when the user scroll to about the 56th item in the list layout,

the item is still about 42th in the grid layout.

This is caused by the height differences for grid and list.

Could someone give me some trick about how to sync roughly when user switch?

Thanks.

You can use the $ionicScrollDelegate service to scroll to the element with a matching id using rememberScrollPosition(id).

so when you switch views you should be able to use: scrollToRememberedPosition([shouldAnimate])

Example:

<ion-toggle ng-model="shouldShowScrollView"></ion-toggle>
<ion-scroll delegate-handle="myScroll" ng-if="shouldShowScrollView">
  <div ng-controller="ScrollCtrl">
    <ion-list>
      <ion-item ng-repeat="i in items">{{i}}</ion-item>
    </ion-list>
  </div>
</ion-scroll>

function ScrollCtrl($scope, $ionicScrollDelegate) {
  var delegate = $ionicScrollDelegate.$getByHandle('myScroll');

  delegate.rememberScrollPosition('my-scroll-id');
  delegate.scrollToRememberedPosition();
  $scope.items = [];
  for (var i=0; i<100; i++) {
    $scope.items.push(i);
  }
}

You can read more about it here: http://ionicframework.jp/docs/api/service/$ionicScrollDelegate/