Ion-slides only working after browser resize

I have the following problem:
The slider (ion-slides) only works after I resize the browser or when I call the slider’s update() function. If I don’t do that, the slider won’t let me change the slides. I can swipe the slide to an extent where I can see parts of the new slide, but when I release the mouse (or finger on mobile device) it snaps back to the first slide.

I tried calling the slider’s update function on $ionicView.AfterEnter or $ionicView.loaded without success. Calling update() after a 1 second timeout after the slider has been initialized works most of the time, but that is not a solution.

After the update call or after I resized the browser, everything works as expected.

I wrote a SliderService so that I can reuse the code for every page of my app that needs the slider:


            this.createSlider = function (scope) {
                return {
                    slider: {},
                    data: {},
                    options: {
                        speed: 500,
                        direction: 'horizontal',
                        effect: 'slide',
                        pagination: false,
                        touchAngle: 25

            this.initSlider = function (scope) {
                scope.$watch("", function (nv, ov) {
                    scope.slider.slider =;
                    if (scope.slider.slider) {
//                        $timeout(function () {
//                            scope.slider.slider.update();
//                        }, 750);


            $scope.slider = SliderService.createSlider($scope);


      <ion-slides options="slider.options" slider="">
            <ion-content class="has-tabs-top" has-bouncing="false" overflow-scroll="false">

            <ion-content class="has-tabs-top" has-bouncing="false" overflow-scroll="false">