$ionicSlideBoxDelegate not working in mobile

1

I am developing a new application in which i need to have control on slides to be displayed along with tabs. I have achieved it in following way. It is working fine in browser but as soon as i executes the mobile app with this code is does not give me same result as it is in browser. The $ionicSlideBoxDelegate.slide(ind) does not works in mobile app.

<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="js/stub_config.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
 <!-- Include Tab JS And CSS -->
<link href="css/style.css" rel="stylesheet">


<script type="text/javascript">
document.addEventListener('deviceready', function onDeviceReady() 
{
    //alert('Device Ready');
    angular.bootstrap(document, ['starter']);
}, false);
</script>
Tab 1 Tab 2 Tab 3 Tab 4 Tab 5 Tab 6 
                        <ion-slide-box on-slide-changed="slideHasChanged($index)" show-pager="false" >
                        
                            <ion-slide ng-if="tf1">
                                    <div class="box blue"><h1>Tab 1</h1></div>
                            </ion-slide>
                            <ion-slide ng-if="tf2">
                                    <div class="box yellow"><h1>Tab 2</h1></div>
                            </ion-slide>
                            <ion-slide ng-if="tf3">
                                    <div class="box pink"><h1>Tab 3</h1></div>
                            </ion-slide >
                            <ion-slide ng-if="tf4">
                                    <div class="box blue"><h1> Tab 4</h1></div>
                            </ion-slide>
                            <ion-slide ng-if="tf5">
                                    <div class="box yellow"><h1>Tab 5</h1></div>
                            </ion-slide>
                            <ion-slide ng-if="tf6">
                                    <div class="box pink"><h1>Tab 6</h1></div>
                            </ion-slide>
                            
                            
                            
                        </ion-slide-box>

            </ion-content>
    </ion-view>
and my JS file looks as bellow

var slindex;

angular.module(‘starter.controllers’, [])

.controller(‘AppCtrl’, function( $scope, $state)
{
$scope.$on(‘updateUser’, function()
{
$scope.uName=uName;
$scope.uEmail = uEmail;
$scope.logInOutTitle =logInOutTitle;
$scope.uType=uType;
})

    $scope.loginoutClick = function()
    {
         window.localStorage.setItem("username", null);
         window.localStorage.setItem("password", null);
         window.localStorage.setItem("email", null);
            $state.go('app.detailhome');
    }

})

.controller(‘tabbedCtrl’, function( $scope, $state,$ionicSlideBoxDelegate)
{

$scope.t1=10;
$scope.t2=0;
$scope.t3=1;
$scope.t4=2;
$scope.t5=13;
$scope.t6=14;    


$scope.tf1=false;
$scope.tf2=true;
$scope.tf3=true;
$scope.tf4=true;
$scope.tf5=false;
$scope.tf6=false;


 $scope.$on('updateSlide', function() 
         {
                 $scope.slind = slindex;
         });



 
 $scope.changeSlide = function(ind)
 {
     
     console.log('Here ' + $ionicSlideBoxDelegate + " , " + ind) 
     $ionicSlideBoxDelegate.slide(ind);

 }

$scope.slideHasChanged = function(data)
{
    alert(data)    ;
    $scope.slind=data;
}

})