Having an ion-pane within the ion-content of another results in not showing the inner one

I'm trying to put an ion-pane within another ion-pane both with header and footer. The problem is that the inner pane is trapped within a div element without height and thus not shown at all. Here're my tags:

<ion-pane>
    <ion-header-bar class="bar-positive">
        <h1 class="title">Demo</h1>
    </ion-header-bar>

    <ion-content>
<!-- invisible tags { -->
        <ion-pane>
        <ion-header-bar>
            <h1 class="title">Log on form</h1>
        </ion-header-bar>
        <ion-content>
            <form ng-submit="doLogin()">
            <div class="list">
                <label class="item item-input">
                <span class="input-label">Username:</span>
                <input type="text" ng-model="loginData.username">
                </label>
                <label class="item item-input">
                <span class="input-label">Password:</span>
                <input type="password" ng-model="loginData.password">
                </label>
                <label class="item">
                <button class="button button-block button-positive" type="submit">Log on</button>
                </label>
            </div>
            </form>
        </ion-content>
        </ion-pane>
<!-- invisible tags } -->
    </ion-content>

    <ion-footer-bar class="bar-stable">
        <a class="button button-clear" ui-sref="terms">Terms</a>
        <a class="button button-clear" ui-sref="about">About</a>
        <a class="button button-clear" ui-sref="contact">Contact</a>
    </ion-footer-bar>
</ion-pane>

I'm testing with Ionic 1.2.13.