Navigating from nav-button added to nav-bar

Using the tabs and nav demo I have been building a simple app.

I want to add info button to the nav bar, this can be ‘secondary’ to not interfere with the back button that appears on the left when navigating through the stack.

Here is the /template for one of the tabbed pages that i have added an info button:

<ion-view view-title="Gallery">

<ion-nav-buttons side="secondary">
      <button class="button button-icon icon ion-ios-information-outline" href="#/tab/Demo1">
        
      </button>
    </ion-nav-buttons>

        <ion-content class="padding">
          <h3>Digit2Widgets Gallery Showcase.</h3>
          <p>
            <a class="button button-block button-light" href="#/tab/Demo1">Gallery Demo 1</a>
            <a class="button button-block button-light" href="#/tab/galleryDemo2">Gallery Demo 2</a>
          </p>
        </ion-content>
      </ion-view>

Now the gallery demo button bellow works and navigates to demo1 but the button at the top added to nav bar does not? How can i fix this?
is there an easier way to add a permanent info button to the right of the nav bar?

Any help greatly appreciated.

Fred

You should use ui-sref to navigate by passing the state name: <button class="button button-icon icon ion-ios-information-outline" ui-sref="tab.Demo1">