$ionicSlideBoxDelegate not working at all? [SOLVED]

[SOLVED] …Solution at the end…

Hi Guys…

I have followed everything to the letter and I can’t get any of the methods in $ionicSlideBoxDelegate to work.
The console.log returns blank.
I have 5 slide that all work perfectly otherwise.

My Code:

HTML (There is a lot around this HTML, but I just took out the section with the function call)

<div class="card"  ng-click="whatSlide()">
      <div class="item item-text-wrap">
        click me
      </div>
</div>

JAVASCRIPT

app.controller("myAppCtrl", function(
               $scope, 
               $ionicTabsDelegate,
               $ionicActionSheet,
               $timeout,
               $ionicSideMenuDelegate,
               $ionicPopover,
               $ionicSlideBoxDelegate
               ) {
    
    
    //===Tabs and slide box controls===
    
    $scope.whatSlide = function() {
        $ionicSlideBoxDelegate.next()
        console.log($ionicSlideBoxDelegate.slidesCount());
    }
    
    //===onHold controls===
     
    $scope.holdTest = function() {
        console.log("hold test running");
    }
    
    //All Popover controls    
    
// .fromTemplateUrl() method
  $ionicPopover.fromTemplateUrl('my-popover.html', {
    scope: $scope
  }).then(function(popover) {
    $scope.popover = popover;
  });

  $scope.openPopover = function($event) {
    $scope.popover.show($event);
  };
  $scope.closePopover = function() {
    $scope.popover.hide();
  };
  //Cleanup the popover when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.popover.remove();
  });
  // Execute action on hide popover
  $scope.$on('popover.hidden', function() {
    // Execute action
  });
  // Execute action on remove popover
  $scope.$on('popover.removed', function() {
    // Execute action
  });
    
    
    //===Side menu controls===
    
    $scope.toggleBurgerMenu = function() {
        $ionicSideMenuDelegate.toggleRight();
    }
       
});

[SOLUTION]