Left side menu not appearing on drag of body content

ionic-v1
1

The left side menu not appearing properly on body content drag , i have to drag multiple time then it is appearing one time… please help me , ionic framework is new for me…
mainCtrl.js*
angular.module(‘starter.controllers’)
.controller(‘MainCtrl’, function($scope,$ionicSideMenuDelegate) {
$scope.mainCtrl = {};
$scope.leftButtons = [{
type: ‘button-icon button-clear ion-navicon’,
tap: function(e) {
$ionicSideMenuDelegate.toggleLeft($scope.$$childHead);
}
}];

$scope.mainCtrl.showFeature = false;

});

homeCtrl.js********
angular.module(‘starter.controllers’)
.controller(‘homeCtrl’, function($scope,$ionicSlideBoxDelegate,$http,RestService) {
RestService.getAllProducts().then(function(res){
$scope.data = {
numViewableSlides : 0,
slideIndex : 0,
initialInstruction : true,
secondInstruction : false,
slides : res

    };
    var count = 0 ;
    _.forEach($scope.data.slides, function(slide) {
        count++;
        if(count < 5)
            slide.viewable = true;
        else
            slide.viewable = false;
        

    })
    $ionicSlideBoxDelegate.update();
    $scope.countSlides();
});
$scope.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");
}

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

$scope.showBonus = function() {
var index = _.findIndex($scope.data.slides, { template : ‘bonusSlide.html’ });
$scope.data.slides[index].viewable = true;
countSlides();
$scope.data.initialInstruction = false
$scope.data.secondInstruction = true;

  $ionicSlideBoxDelegate.update();

};

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

  $scope.data.slideIndex = index;

};
});

home.html***************

 <ion-nav-bar class="nav-title-slide-ios7 bar-dark">
 
 <ion-nav-buttons side="left">

       <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>

    </ion-nav-buttons>
         
    <ion-nav-buttons side="right"> 

        <a class="button button-icon icon ion-ios7-plus-empty"></a> 

     </ion-nav-buttons> 
     
     </ion-nav-bar>

 <div class="e-pg-pd-slider-c">

       <ion-slide-box show-pager="false" delegate-handle="product-home" on-slide-changed="slideHasChanged($index)"> 
    
       <ion-slide>

       <div class="e-compliance-log">
               </div>

       <div class="e-home-pg-content">
       <div class="e-pg-product-name">THINKPAD X1 CARBON</div>
       
       <div class="e-pg-product-quote-c">
        
   
       </div>
    
       <div class="e-home-pg-pd-img">
         
       </div>
   
   </div>

<div class="e-home-subproduct-c">
    
    <div class="e-subproduct e-dark-blue">
    <div class="e-pd-title">THINKPAD 8</div>
    
 

</div>
    
<div class="e-subproduct e-teal">
    <div class="e-pd-title">THINK CENTER E93z AIO</div>
    
    
    
</div>
    
<div class="e-subproduct e-purple">
    <div class="e-pd-title">THINKPAD YOGA</div>
    
  
</div>
    
    
<div class="clearfix"></div>
</div>


</ion-slide>

<ion-slide ng-repeat="product in products track by product.slug">

  <div class="e-product-pg-content">
     <div class="e-product-pg-inner">
        
         <div class="e-pg-num">
            <i class="ion-ios7-arrow-left"></i>{{$index+1}}/{{products.length}}
            <i class="ion-ios7-arrow-right"></i>
         </div>
        
        <div class="e-pg-product-name">{{product.title}}</div>
        
        <div class="e-pg-product-quote-c">
            <h3>{{product.headline}}</h3>
            <h4>{{product.headline_source}}</h4>
            <div class="e-pd-img">
            
        </div>
            
        <p class="e-pd-short-desc">{{product.short_description}}</p>
        <div class="e-price-c">STARTING PRICE: <strong>{{product.price}}</strong> <br /> 
        <small>EXCL.VAT</small>
        </div>
            
        <button class="button e-buy-btn">BUY NOW</button>
    
    </div>

 </div>
    
<div class="e-pd-spec-btns-c">
        <ul class="list-inline">
            <li><a class="button" on-nav-animation="slide-in-up"
                ng-href="#/app/home/product/{{product.slug}}/features">
                    FEATURES </a></li>
            <li><a class="button" on-nav-animation="slide-in-up"
                ng-href="#/app/home/product/{{product.slug}}/accessories">
                    ACCESSORIES </a></li>
            <li><a class="button" on-nav-animation="slide-in-up"
                ng-href="#/app/home/product/{{product.slug}}/services">
                    SERVICES </a></li>
        </ul>
<div class="clearfix"></div>

</div>

<div class="e-related-content">
        
        <div class="e-related-videos">
            <label>{{product.title}} VIDEOS</label>
        <div>
            <ul style="width: 1500px;">
                <li ng-repeat="video in product.videos.data track by $index">
                    <a ng-href="#/app/videos/{{product.slug}}/{{$index}}"> 
                    
                        <div class="e-play-ic">
                            <i class="ion-play"></i>
                        </div>
                    </a>
                    </li>
                
                </ul>
            
            </div>
        
        </div>
        
        <div class="e-text-content">
            
            <div class="e-testimonial-c">
                <label>{{product.articles.header}}</label> 
                <a href="#/app/article/{{product.slug}}/0">
                    <p>{{product.articles.data[0].title}}</p>
                </a>
            </div>
            
            <div class="e-review-c">
                <label>{{product.captions.header}}</label>
                <p>{{product.captions.data.title}}</p>
                <p>{{product.captions.data.source}}</p>
            </div>
        
        </div>
    
    </div>

</div>

</ion-slide> 

</ion-slide-box>

<div class="e-pd-sidebar" ng-class="{'e-open' : isShowingPDSidebar}">
    <div class="e-sidebar-arrow" on-touch="isShowingPDSidebar = !isShowingPDSidebar">
        <i class="ion-chevron-left"></i> <i class="ion-chevron-left"></i>
    </div>
    
    <div class="list e-sidebar-menu-c">
        <a class="item item-icon-left"
            href="#/app/gallery/{{products[currentProduct-1].slug}}"> 
            <i class="e-carousel-ic"></i> IMAGES
        </a> 
        
        <a class="item item-icon-left item-icon-right" href="#">
         <i class="e-download-ic"></i>
             <div>DOWNLOAD <br />
                  <button class="button button-small">BROCHURE</button>
                  <button class="button button-small">SPEC SHEET</button>
            </div>
        </a> 
        
        <a > <i class="e-email-ic"></i>
            SHARE
        </a>
        <a> <i class="e-email-ic"></i>
            <strong>CALL US</strong>: 01189238163
        </a>
    
    </div>

</div>

menu.html********

            <h2>HOME</h2>
        </ion-item>
        <ion-item  menu-close class="item item-avatar item-icon-right" href="#/app/productmenu">
         
            <h2>PRODUCTS</h2>
            <i class="icon ion-chevron-right"></i>
        </ion-item>
        <ion-item  menu-close class="item item-avatar item-icon-right" href="#/app/productfinderlistmenu">
                            <h2>PRODUCT FINDER</h2>
            <i class="icon ion-chevron-right"></i>
        </ion-item>
        <ion-item  menu-close class="item item-avatar item-icon-right" href="#/app/search">
     
            <h2>HOW TO USE APP</h2>
            <i class="icon ion-chevron-right"></i>
        </ion-item>
        <ion-item  menu-close class="item item-avatar item-icon-right" href="#/app/about">
 
            <h2>ABOUT APP</h2>
            <i class="icon ion-chevron-right"></i>
        </ion-item>
    </ion-list>