When applying lockSwipes, I cannot scroll image in X-axis - ionic-framework

Question

I am developing an app using ionic v1.
I placed ion-slide-page in ion-slides and ion-scroll in ion-slide-page as shown below. This ion-scroll contains an image.
What I want to do is to keep the slide from moving left and right when the image is enlarged. (Like Facebook)
If I enlarge the image, I cannot scroll the image in X-axis.
Template:
<ion-slides options="options" slider="data.slider">
<ion-slide-page ng-repeat="image in post.imgs">
<ion-scroll
direction="xy"
scrollbar-x="false" scrollbar-y="false"
zooming="true" min-zoom="1" max_zoom="3"
overflow-scroll="false" locking="false" has-bouncing="true"
style="width: 100%; height: 100%" class="vertical-center"
delegate-handle="scrollHandle{{$index}}"
on-release="updateSlideStatus()">
<image style="width: 100%; height: 100%" ng-src="{{image}}"></image>
</ion-scroll>
</ion-slide-page>
</ion-slides>
Contorller:
$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
console.log('ionic slides initialized');
$scope.slider = data.slider;
$scope.activeIndex = 0;
$scope.isSwipeLocked = false;
});
$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
console.log('Slide change is beginning');
});
$scope.$on("$ionicSlides.slideChangeEnd", function(event, data) {
console.log('ionic slides change end');
$scope.activeIndex = data.slider.activeIndex;
$scope.previousIndex = data.slider.previousIndex;
});
$scope.updateSlideStatus = function() {
var zoom = $ionicScrollDelegate.$getByHandle('scrollHandle' + $scope.activeIndex).getScrollPosition().zoom;
if (zoom === 1) {
if ($scope.isSwipeLocked == true) {
$scope.slider.unlockSwipes();
$scope.isSwipeLocked = false;
}
} else {
if ($scope.isSwipeLocked == false) {
$scope.slider.lockSwipes();
$scope.isSwipeLocked = true;
}
}
};
Is there any idea?