title: Ionic ion-view class has to be bar-subheader otherwise won't render view
body: <p>Hey i'm working on this Ionic project and for some reason, my views will only render if the ion-view class equals a class of "bar-subheader". I've been stuck trying to figure out what I did wrong, maybe I've read the docs wrong. What's happening is when the nested state renders, the whole layout of the view is placed with a height equal to the class "bar-subheader" or the view doesn't get rendered at all without a class of "bar-subheader" assigned to the view. In the stores.html, the products are present on the view, but because the ion-view class equals "bar-subheader" you will not see the remaining content. Without a class of "bar-subheader" the content will flash for a half a second and then disappear.  </p>
  
  <p><strong>App.js</strong> </p>
  
  <pre><code>    angular.module('ArtSFApp', ['ionic', 'controllers', 'starter.services'])    
  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('app', {
      url: '/app',
      abstract: true,
      templateUrl: 'templates/app.html',
      controller: 'AppCtrl'
    })
    .state('app.store', {
      url: '/store',
      views: {
        'store': {
          templateUrl: 'templates/store.html',
          controller: 'StoreCtrl'
        }
      }
    })
    .state('app.store.artist', {
      url: '/artist',
      views: {
        'artist': {
          templateUrl: 'templates/artist.html',
          controller: 'StoreCtrl'
        }
      }
    })
    .state('app.store.categories', {
        url: '/categories',
        views: {
          'categories': {
            templateUrl: 'templates/categories.html',
            controller: 'StoreCtrl'
          }
        }
      })
    .state('app.store.categories.paintings', {
        url: '/paintings',
        views: {
          'paintings': {
            templateUrl: 'templates/paintings.html',
            controller: 'StoreCtrl'
          }
        }
      })
    .state('app.store.categories.sculptures', {
        url: '/sculptures',
        views: {
          'sculptures': {
            templateUrl: 'templates/sculptures.html',
            controller: 'StoreCtrl'
          }
        }
      })
    .state('app.store.categories.drawings', {
        url: '/drawings',
        views: {
          'drawings': {
            templateUrl: 'templates/drawings.html',
            controller: 'StoreCtrl'
          }
        }
      })
    .state('app.store.categories.prints', {
        url: '/prints',
        views: {
          'prints': {
            templateUrl: 'templates/prints.html',
            controller: 'StoreCtrl'
          }
        }
      })
    .state('app.store.categories.books', {
        url: '/books',
        views: {
          'books': {
            templateUrl: 'templates/books.html',
            controller: 'StoreCtrl'
          }
        }
      })
      .state('app.store.sale', {
        url: '/sale',
        views: {
          'sale': {
            templateUrl: 'templates/sale.html',
            controller: 'StoreCtrl'
          }
        }
      });
    $urlRouterProvider.otherwise('/app/blog');
  });
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>  &lt;body ng-app="ArtSFApp"&gt;
      &lt;ion-header-bar class="main-header bar"&gt;
        &lt;div class="row"&gt;
          &lt;div class="logo col-offset-10 col-20"&gt;
            ArtSFBlog
          &lt;/div&gt;
          &lt;label class=" searchbar col-33 col-offset-25 item item-input"&gt;
            &lt;i class="icon ion-search placeholder-icon"&gt;&lt;/i&gt;
            &lt;input ui-sref="app.search" type="text" ng-model="searchText" placeholder="Search"&gt;
          &lt;/label&gt;
          &lt;div class="cart"&gt;
            &lt;i class="ion-ios-cart" ui-sref="app.cart"&gt;&lt;/i&gt; 
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/ion-header-bar&gt;
      &lt;!--
        The views will be rendered in the &lt;ion-nav-view&gt; directive below
        Templates are in the /templates folder (but you could also
        have templates inline in this html file if you'd like).
      --&gt;
      &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.html</strong></p>
  
  <pre><code> &lt;ion-tabs class="tabs-top"&gt;
    &lt;ion-tab class="navtab" title="Blog" ui-sref="app.blog"&gt;&lt;/ion-tab&gt;
    &lt;ion-tab class="navtab" title="Store" ui-sref="app.store"&gt;&lt;/ion-tab&gt;
    &lt;ion-tab class="navtab" title="Contact" ui-sref="app.contact"&gt;&lt;/ion-tab&gt;
  &lt;/ion-tabs&gt;
  
  &lt;ion-view&gt;
    &lt;ion-content&gt;
      &lt;ion-nav-view name="blog"&gt;&lt;/ion-nav-view&gt;
      &lt;ion-nav-view name="store"&gt;&lt;/ion-nav-view&gt;
      &lt;ion-nav-view name="contact"&gt;&lt;/ion-nav-view&gt;
      &lt;ion-nav-view name="search"&gt;&lt;/ion-nav-view&gt;
    &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p><strong>store.html</strong></p>
  
  <pre><code>    &lt;ion-view title="Store" class="bar-subheader"&gt;
    &lt;ion-content ng-controller="StoreCtrl" &gt;
  
      &lt;ion-header  class="bar"&gt;
        &lt;ion-panel ng-click="openPopover2($event)" class="tab-item active" ui-sref="app.store.artist"&gt;
          Artist 
        &lt;/ion-panel&gt;
        &lt;div ng-click="openPopover($event)" ng-click="myFilter = { }" class="tab-item active"  ui-sref="app.store.categories"&gt;
          Categories 
        &lt;/div&gt;
        &lt;div class="tab-item active" ui-sref="app.store.sale"&gt; 
        Sale
        &lt;/div&gt;
      &lt;/ion-header&gt;
    &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  &lt;ion-content class='has-subheader'&gt;
    &lt;ion-list ng-repeat="product in products | filter:myFilter"&gt;
      &lt;ion-item&gt;
        &lt;ion-panel class="item-thumbnail-left"&gt;&lt;/ion-panel&gt;
        &lt;h2&gt; {{product.title}} &lt;/h2&gt;
        &lt;p&gt; {{product.artist}} &lt;/p&gt;
        &lt;p&gt; {{product.description}} &lt;/p&gt;
        &lt;p&gt; {{product.dimensions}} &lt;/p&gt;
        &lt;p&gt; {{product.price}} &lt;/p&gt;
        &lt;p&gt; {{product.quantity}} &lt;/p&gt;
      &lt;/ion-item&gt;
    &lt;/ion-list&gt;
  &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p><strong>controllers.js</strong></p>
  
  <pre><code>  angular.module('controllers', [])
  .controller('StoreCtrl', function($scope, $ionicPopover) {
    $scope.products = [
    {
      type: "painting",
      title: "painting1",
      artist: "artist",
      description: "description",
      dimensions: "10 x 10",
      price: "$0.00"
    },
     {
      type: "painting",
      title: "painting2",
      artist: "artist",
      description: "description",
      dimensions: "10 x 10",
      price: "$0.00"
    },
     {
      type: "drawing",
      title: "drawing1",
      artist: "artist",
      description: "description",
      dimensions: "10 x 10",
      price: "$0.00"
    },
    {
      type: "zines",
      title: "zine",
      artist: "artist",
      description: "description",
      dimensions: "10 x 10",
      price: "$0.00"
    }
    ];
      $ionicPopover.fromTemplateUrl('templates/categories.html', {
        scope: $scope,
      }).then(function(popover) {
        $scope.popover = popover;
        console.log('opening');
      });
  
  
       $ionicPopover.fromTemplateUrl('templates/artist.html', {
        scope: $scope,
      }).then(function(popover2) {
        $scope.popover2 = popover2;
        console.log('opening');
      });
        $scope.openPopover2 = function($event) {
          $scope.popover2.show($event);
          console.log('opened');
  
       };
        $scope.openPopover = function($event) {
          $scope.popover.show($event);
          console.log('opened');
       };
  
  });
  </code></pre>
  
  <p><strong>categories.html</strong></p>
  
  <pre><code>    &lt;ion-popover-view&gt; 
    &lt;ion-content&gt;
      &lt;div class="list"&gt;
          &lt;a class="item" ng-click="myFilter ={paintings}" ui-sref="app.store.categories.paintings"&gt;Painting&lt;/a&gt;
          &lt;a class="item" ng-click="myFilter ={type: sculpture}" ui-sref="app.store.categories.sculpture"&gt;Sculpture&lt;/a&gt;
          &lt;a class="item" ng-click="myFilter ={type: drawings}" ui-sref="app.store.categories.drawings"&gt;Drawings&lt;/a&gt;
          &lt;a class="item" ng-click="myFilter ={type: prints}" ui-sref="app.store.categories.prints"&gt;Prints&lt;/a&gt;
          &lt;a class="item" ng-click="myFilter ={type: books}" ui-sref="app.store.categories.books"&gt;Books&lt;/a&gt;
          &lt;a class="item" ng-click="myFilter ={zines}" ui-sref="app.store.categories.zines"&gt;Zines&lt;/a&gt;
      &lt;/div&gt;
    &lt;/ion-content&gt;
  &lt;/ion-popover-view&gt; 
  </code></pre>