How to identify ionic tags using Protractor?

I have a simple ionic template as below. In Protractor, how do I write the locator to locate the Ionic elements, say the Title and Left and Right buttons. How do I check that the title is 'My Title'? I could not bind by H1, as supposedly there are lots of H1 in my template.

<ion-header-bar align-title="left" class="bar-positive">
    <div class="buttons">
        <button class="button" ng-click="doSomething()">Left Button</button>
    </div>
    <h1 class="title">My Title</h1>
    <div class="buttons">
        <button class="button">Right Button</button>
    </div>
</ion-header-bar>
<ion-content>
    Some content!
</ion-content>

  1. In your controller, define

    $scope.someTag = "whatever"

  2. Apply your functions in the controller on $scope.someTag

  3. In your DOM (for example your title), assign:

    title="{{someTag}}"

In this way you keep control of what you are doing!

I'd find the elements by xpath relying on their tag names, classes and relative positions:

var title = element(by.xpath('//h1[@class="title" and following-sibling::div[@class="buttons"] and preceding-sibling::div[@class="buttons"]'));
var leftButton = title.element('preceding-sibling::div[@class="buttons"]/button');
var rightButton = title.element('following-sibling::div[@class="buttons"]/button');