Using IonicSlideBox with already existing html page

ionic-v1
1

Hi,

I am trying to use IonicSlideBox with a html page that also has it’s own controller, and this is not working.
The issue is, I have a html page called ataglance.html and I have another html page called ataglanceholder.html which uses IonicSlideBox. ataglance.html has it’s own controller and works fine on it’s own. When I use the controller for ataglanceholder.html to load ataglance.html the page loads but doesn’t have any of the information loaded from the controller.

The code I have is:

app.js

.state(‘app.ataglance’, {

    url: '/ataglance',
    views: {
        'menuContent': {
            templateUrl: 'templates/ataglance.html',
            controller: 'AtAGlanceCtrl'
        }
    }
})

.state('app.ataglanceholder', {
    url: '/ataglanceholder',
    views: {
        'menuContent': {
            templateUrl: 'templates/ataglanceholder.html',
            controller: 'AtAGlanceHolderCtrl'
        }
    }
})

ataglanceholder controller:

.controller('AtAGlanceHolderCtrl', function ($scope, $stateParams, $ionicSlideBoxDelegate) {

    $scope.data = {
        numViewableSlides: 0,
        slideIndex: 0,
        initialInstruction: true,
        secondInstruction: false,
        slides: [
            {
                'template': 'templates/ataglance.html',
                'viewable': true
    },

            {
                'template': 'templates/secondSlide.html',
                'viewable': true
    },

            {
                'template': 'templates/thirdSlide.html',
                'viewable': true
    }
  ]
    };

    var countSlides = function () {
        $scope.data.numViewableSlides = 0;

        _.forEach($scope.data.slides, function (slide) {
            if (slide.viewable === true) $scope.data.numViewableSlides++;
        })

        console.log($scope.data.numViewableSlides + " viewable slides");

    }

    countSlides();

    // Called to navigate to the main app
    $scope.startApp = function () {
        $state.go('main');
    };
    $scope.next = function () {
        $ionicSlideBoxDelegate.next();
    };
    $scope.previous = function () {
        $ionicSlideBoxDelegate.previous();
    };

    // Called each time the slide changes
    $scope.slideChanged = function (index) {

        $scope.data.slideIndex = index;
    };


})

ataglance controller:

.controller('AtAGlanceCtrl', function ($scope, $stateParams, $http) {

    var cust_id = "0f0c81d89a812aa0d0bdd794773345fa";
    var order_id = "8e22b8abd33053c6f6d08c14462cf36a";

    var latlon = new google.maps.LatLng(0, 0);
    var mapholder = document.getElementById('display_map');

    var myOptions = {
        center: latlon,
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };

    var directionsDisplay = new google.maps.DirectionsRenderer();
    var directionsService = new google.maps.DirectionsService();
    var map = new google.maps.Map(mapholder, myOptions);
    directionsDisplay.setMap(map);


    var estimateMarker = new google.maps.Marker({
        position: latlon,
        animation: google.maps.Animation.DROP,
        map: map
    });

    var courierMarker = new google.maps.Marker({
        position: latlon,
        animation: google.maps.Animation.DROP,
        map: map
    });

    tracker($scope, $http, cust_id, order_id, map, estimateMarker, courierMarker, directionsDisplay, directionsService);
})