ion-content overlap with ion-header-bar

I am building phonegap apps based on ionic framework. In one html page, I need one header and one content.But the header overlaps with the content. I am sorry I have no enough reputation to post the image.

The code is following. The html page is in the same folder with lib folder, which contains the ionic css and js folders.

<html>
<head>
<meta charset="utf-8">
<title>Weather</title>

<!-- Sets initial viewport load and disables zooming  -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="lib/css/ionic.css">

<script src="lib/js/ionic.bundle.js"></script>
<script src="lib/js/angular/angular-resource.js"></script>
</head>
<body>
    <ion-header-bar class="bar bar-header bar-dark">
      <h1 class="title">Settings</h1>
      <button class="button button-clear" ng-click="closeSettings()">Close</button>
    </ion-header-bar>
    <ion-content has-header="true">
      <div class="padding">
        <div class="list">
          <label class="item item-input">
            <span class="input-label">Units</span>

            <ion-radio-buttons ng-model="settings.tempUnits">
              <button class="button button-positive button-radio" ng-value="'f'">&deg;F</button>
              <button class="button button-positive button-radio" ng-value="'c'">&deg;C</button>
            </ion-radio-buttons>
          </label>
        </div>
      </div>
    </ion-content>

<!-- <ion-pane id="wrapper"> -->

Back Magnus Cards 

<!-- </ion-pane> -->
</body>

see:http://jsbin.com/pagacohovohe/1/edit

Give class="has-header" to ion-content.

<ion-content class="has-header">
</ion-content>

And you need to initialise your angular app - See javascript on my example. Note ng-controller and ng-app.

You may try to set 'has-subheader' class like this

    <ion-content class='has-header has-subheader'>
    ...
    </ion-content>

See: http://ionicframework.com/docs/components/#subheader