Swiper pagination not working inside $ionicModal

[predorock]

Short description of the problem:

Using the ion-slides directive inside a $ionicModal the pagination bullets are not showing up.

What behavior are you expecting?

Using the same html code in a normal view the pagination works. I am expecting to work as well inside a modal.

view.html
<ion-modal-view name="intro" hide-nav-bar="true" ng-controller="SlideController">
  <ion-content scroll="false">
    <ion-slides options="data.options" slider="data.slider">
      <ion-slide-page>
        <div class="box" id="slide-1">
          ...
        </div>
      </ion-slide-page>
      <ion-slide-page>
        <div class="box" id="slide-2">
          ...
        </div>
      </ion-slide-page>
      <ion-slide-page>
        <div class="box" id="slide-4">
          <div class="container">
            ...
          </div>
        </div>
      </ion-slide-page>
    </ion-slides>

    <div ng-class="{'last-slide': data.slider.isEnd}">
      <!-- PAGINATION -->
      <a ng-click="finish()" id="skip" class="link">Skip {{slider.activeIndex}}</a>
      <a ng-click="nextSlide()"id="next" class="link">{{'next' | translate}}</a>
      <div id="my-pagination" class="nav-balls"></div>

      <div class="nav-btn">
        <button class="btn btn-outline" ng-click="finish()">{{'continue' | translate}}</button>
      </div>
    </div>

  </ion-content>
</ion-view>

angular.module('intro')
.controller('SlideController', function ($scope, $log, IntroService) {

  $scope.data = {};

  $scope.data.options = {
    lazyLoading: true,
    preloadImages: false,
    loop: false,
    effect: 'slide',
    speed: 400,
    pagination: '#beacon-pagination',
    paginationClickable: true,
    paginationHide: false
  };

  $scope.data.slider = null;

  var nextPressed = false;

  $scope.nextSlide = function () {
    $log.log('[INTRO] next slide');
    nextPressed = true;
    $scope.data.slider.slideNext();
  };

  $scope.finish = function () {
    $log.log('[INTRO] finish');
    IntroService.hideIntro();
  };

  $scope.$on('$ionicSlides.sliderInitialized', function (event, data) {
    // data.slider is the instance of Swiper
    $log.log('[INTRO] slider initalized');
    $scope.data.slider = data.slider;
  });

  $scope.$on('$ionicSlides.slideChangeStart', function (event, data) {
    $log.log('[INTRO] slide change start');
    if (!nextPressed) {
      $scope.$apply(function () {
        $scope.data.slider = data.slider;
      });
    }
    nextPressed = false;
  });

});

'use strict';
angular.module('intro').service('IntroService', function ($ionicModal) {
  var _modal = null;

  var options = {
    hardwareBackButtonClose: true
  };

  _init();

  return {
    showIntro: showIntro,
    hideIntro: hideIntro
  };

  function _init () {
    $ionicModal
        .fromTemplateUrl('intro/templates/intro.html', options)
        .then(function (modal) {
          _modal = modal;
        });
  }

  function showIntro () {
    return _modal.show();
  }

  function hideIntro () {
    return _modal.hide();
  }

});