Not getting my iOS tabs display in correct format

I’m new to Ionic and i’m having an issue in displaying tabs content in iOS version. It displays correctly in Android version.

This is section of app.js file

    .state('', {
      url: '/menu',
      views: {
        'mainContent' : {
          templateUrl: "templates/menu.html",
          controller: 'MenuController'

Here is my menu.html file

<ion-view view-title="Menu">
      <ion-item ng-repeat="dish in dishes | filter:{category: filtText}" href="#/app/menu/{{}}" class="item-thumbnail-left">
        <img ng-src="{{baseURL+dish.image}}">
         <span style="font-size:75%">{{dish.price | currency}}</span>
        <span class="badge badge-assertive">{{dish.label}}</span></h2>
        <ion-option-button class="button-assertive icon ion-plus-circled" ng-click="addFavorite({{}})"></ion-option-button>
    <div class="tabs-striped tabs-color-royal">
       <div class="tabs">
         <li ng-class="{active:isSelected(1)}" class="tab-item">
             <a ng-click="select(1)">The Menu</a></li>
         <li ng-class="{active:isSelected(2)}" class="tab-item">
             <a ng-click="select(2)">Appetizers</a></li>
         <li ng-class="{active:isSelected(3)}" class="tab-item">
             <a ng-click="select(3)">Mains</a></li>
         <li ng-class="{active:isSelected(4)}" class="tab-item">
             <a  ng-click="select(4)">Desserts</a></li>

Here is my controller. I think there must be something wrong in menu.html. But still, here is my controllers.js section for MenuController.

.controller('MenuController', ['$scope', 'menuFactory', 'baseURL', 'favoriteFactory', '$ionicListDelegate', function($scope, menuFactory, baseURL, favoriteFactory, $ionicListDelegate) {

            $scope.baseURL = baseURL;
            $ = 1;
            $scope.filtText = '';
            $scope.showDetails = false;
            $scope.showMenu = false;
            $scope.message = "Loading ...";

                function(response) {
                    $scope.dishes = response;
                    $scope.showMenu = true;
                function(response) {
                    $scope.message = "Error: "+response.status + " " + response.statusText;

            $scope.isSelected = function (checkTab) {
                return ($ === checkTab);


can someone please help me fix this? I tried to post it in different forums but no response.

Thank you very much for all responses.

Did you look into
Tabs seem to be created quite a bit different here:

Hi Thanks for your help. I had messed up the sequence in menu.html. The tabs should be outside ion-content. I found it… Thank you for your reply.

1 Like