Ionic - ion-view header button net display

Question

I need to add button in the header section but unable to display button in the header section ion-view:

Here is my code :

<ion-view >
    <ion-header-bar class="bar-dark">
        <button class="button button-icon" >
            <i class="icon ion-navicon"></i>
        </button>
        <h1 class="title">ToDo</h1>
        <!-- New Task button-->
        <button class="button button-icon" ng-click="newTask()">
            <i class="icon ion-compose"></i>
        </button>
    </ion-header-bar>

    <ion-content>
        <ion-list>
            <ion-item class="item-remove-animate item-avatar item-icon-right"
                      ng-repeat="chat in chats" type="item-text-wrap"
                      href="#/tab/chats/{{chat.id}}">
                <img ng-src="{{chat.face}}">
                <h2>{{chat.name}}</h2>
                <p>{{chat.lastText}}</p>
                <i class="icon ion-chevron-right icon-accessory"></i>

                <ion-option-button class="button-assertive" ng-click="remove(chat)">
                    Delete
                </ion-option-button>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

And here is the output image.

Update

I want to like this image header bar enter image description here

Answer 1

Try use with ion-nav-buttons :

<ion-view title="ToDo">
   <ion-nav-buttons side="right">
  <button class="button" ng-click="newTask()">
    NEW
  </button>
</ion-nav-buttons>

    <ion-content>
        <ion-list>
            <ion-item class="item-remove-animate item-avatar item-icon-right"
                      ng-repeat="chat in chats" type="item-text-wrap"
                      href="#/tab/chats/{{chat.id}}">
                <img ng-src="{{chat.face}}">
                <h2>{{chat.name}}</h2>
                <p>{{chat.lastText}}</p>
                <i class="icon ion-chevron-right icon-accessory"></i>

                <ion-option-button class="button-assertive" ng-click="remove(chat)">
                    Delete
                </ion-option-button>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

Output in your header