Ionic ion-content doesn't show

I started learning ionic today and had run into strange problem. The info in ion-content tags doesn't show at all. When I remove ion-content tags, the info shows up, but overlaps with header in developer tools, but when I test it in plunker it works fine( doesn't overlap, but footer isn't shown for some reason ). Here's the code: main.html

<ion-content class="has-header has-footer">
  <div class="list list-inset">
    <div class="item item-input-inset">
      <label class="item-input-wrapper">
        <i class="icon ion-ios7-search placeholder-icon"></i>
        <input type="search" placeholder="Search">
      </label>
      <button class="button">Find</button>
    </div>
  </div>
</ion-content>

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>"Ionicapp"</title>

    <!-- build:css styles/vendor.css -->
    <!-- <link rel="stylesheet" href="vendor/some.contrib.css"> -->
    <!-- bower:css -->
    <link rel="stylesheet" href="lib/ionic/release/css/ionic.css" />
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css({.tmp,app}) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->

    <!-- build:js scripts/vendor.js -->
    <!-- <script src="vendor/someContribJs.js"></script> -->
    <!-- bower:js -->
    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular-animate/angular-animate.js"></script>
    <script src="lib/angular-sanitize/angular-sanitize.js"></script>
    <script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="lib/collide/collide.js"></script>
    <script src="lib/ionic/release/js/ionic.js"></script>
    <script src="lib/ionic/release/js/ionic-angular.js"></script>
    <!-- endbower -->
    <!-- endbuild -->
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>


    <!-- build:js scripts/scripts.js -->
    <script src="scripts/config.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers.js"></script>
    <!-- endbuild -->
  </head>

  <body ng-app="Ionicapp">

    <ion-header-bar align-title="center" class="bar-light">
      <div class="button-bar">
        <a class="button" href="#">Rent</a>
        <a class="button" href="#">Sale</a>
      </div>
    </ion-header-bar>

    <ion-nav-view></ion-nav-view>

    <ion-tabs class="tabs-icon-top">
      <ion-tab title="List" icon="icon ion-ios7-paper" href="#"></ion-tab>

      <ion-tab title="Map" icon="icon ion-ios7-world" href="#"></ion-tab>

      <ion-tab title="Statistics" icon="icon ion-ios7-pulse" href="#"></ion-tab>
    </ion-tabs>
  </body>
</html>

Image of developer tools without ion-content: enter image description here

Image of developer tools with ion-content: enter image description here

And plunker if needed: http://plnkr.co/edit/3twAt33BIcgA6HJMYwta?p=preview Thanks for your help.