content of ion-content go inside ion-header-bar

I am new to ionic framework. When I use ion-content like this

<ion-view>
    <ion-header-bar class="bar bar-header bar-positive">
        <div class="buttons">
            <button class="button" ng-click="doSomething()">Left Button</button>
        </div>
        <h1 class="title">Title!</h1>
        <div class="buttons">
            <button class="button">Right Button</button>
        </div>
    </ion-header-bar>
    <ion-content class="has-header">
        <div class="row">
            <div class="col">
                <i class="fa fa-university"></i>
            </div>
            <div class="col">.col</div>
            <div class="col">.col</div>
        </div>
        <div class="row">
            <div class="col">.col</div>
            <div class="col">.col</div>
            <div class="col">.col</div>
        </div>
    </ion-content>
</ion-view>

First row go inside header bar. What's the problem?

I've used requirejs to load controller .