why the button is not visible for all time (visible while scroll )?

I am trying to make pop over in which there is multiple selected element present .In that there is header present and contend but footer is not present .I need there is a close button on footer which is visible at all time .it is also visible when scrolling the data .In other words Please click on right most icon "gear" icon it open pop over when you scroll data you can see there is close button present .I need that button present on footer which should display all time Here is my code

<script id="my-column-name.html" type="text/ng-template">
    <ion-popover-view>
        <ion-header-bar>
            <h1 class="title">Show Columns</h1>
        </ion-header-bar>
        <ion-content>
            <ul class="list" ng-repeat="item in data">
                <li class="item item-checkbox">
                    <label class="checkbox">
                        <input type="checkbox" ng-model="item.checked">
                    </label>
                    {{item.label}}
                </li>
            </ul>
            <ion-footer-bar>
                <button ng-click="closePopover()">close</button>
            </ion-footer-bar>

        </ion-content>
    </ion-popover-view> 

http://plnkr.co/edit/HSngVd7Q6IRi8EtSVHTJ?p=preview