Issue to click an Ionic button with protractor

Question

In Protractor I have issues to retrieve the element corresponding to a button located in the Ionic1 header of my single-page app.

• when I try to get it through element(by.id("toolButton")), I get a warning saying that there are several such objects, and that Protractor will take the first one. Then when I perform the click, I get an error saying that the element is not visible. With browser.wait(EC.visibilityOf(btn), 5000) I get a timeout. Digging in Chrome it appears that there are 2 instances of the page: one with <div class="nav-bar-block" nav-bar="active">, and another one with nav-bar="cached" instead of "active". So I guess Protractor catches the cached instance. (btw, I don't know why there is a cache version, my UI-router says cache:false for every state).

• when I use Elementor to find a way to uniquely identify the button, it tells me log: "Cannot find suggestions".

Any idea to cope with this please?

Below you will find a screenshot of toolbar, and an extract of the HTML code showing the 2 instances of the toolbar. The button is the one marked '+'.

<ion-nav-bar class="bar-balanced ng-class:$root.backgroundClass nav-bar-container contact-background" nav-bar-transition="ios" nav-bar-direction="forward" nav-swipe="" style="">
  <ion-nav-back-button class="hide"></ion-nav-back-button>
  <ion-nav-buttons side="left" class="hide"></ion-nav-buttons>
  <ion-nav-buttons side="right" class="hide"></ion-nav-buttons>

  <div class="nav-bar-block" nav-bar="active">
    <ion-header-bar class="bar-balanced ng-class:$root.backgroundClass bar bar-header contact-background" align-title="center" style="">
      <button ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item"><i class="icon ion-ios-arrow-back"></i>          
        <span class="back-text" style="transform: translate3d(0px, 0px, 0px);"><span class="default-title hide">Back</span>
        <span class="previous-title">Accueil</span></span>
      </button>
      <div class="buttons buttons-left header-item"><span class="left-buttons">
        <button id="leftMenuBtn" class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button></span>
      </div>
      <div class="title title-center header-item" style="transform: translate3d(0px, 0px, 0px); left: 114px; right: 114px;"><span class="nav-bar-title">
        <i class="icon ion-person"></i> Contacts</span>
      </div>
      <div class="buttons buttons-right header-item"><span class="right-buttons">
        <button id="toolButton" class="button button-icon button-clear ng-class:$root.toolButtonIcon ion-plus" ng-click="$root.toolClick()" style=""></button>
        <button class="button button-icon button-clear ion-ios-film" menu-toggle="right" ng-disabled="$root.getLogin() == null"></button></span>
      </div>
    </ion-header-bar>
  </div>

  <div class="nav-bar-block" nav-bar="cached">
    <ion-header-bar class="bar-balanced ng-class:$root.backgroundClass bar bar-header contact-background" align-title="center" style="">
      <button ng-click="$ionicGoBack()" class="button back-button hide buttons  button-clear header-item" style="opacity: 0;"><i class="icon ion-ios-arrow-back"></i>          
        <span class="back-text" style="transform: translate3d(0px, 0px, 0px); opacity: 0;"><span class="default-title">Back</span>
        <span class="previous-title hide"></span></span>
      </button>
      <div class="buttons buttons-left header-item" style="opacity: 0;"><span class="left-buttons">
        <button id="leftMenuBtn" class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button></span>
      </div>
      <div class="title title-center header-item" style="left: 56px; right: 56px; transform: translate3d(-123.172px, 0px, 0px); opacity: 0;"><span class="nav-bar-title">
        <i class="icon ion-home"></i> Accueil</span>
      </div>
      <div class="buttons buttons-right header-item" style="opacity: 0;"><span class="right-buttons">
        <button id="toolButton" class="button button-icon button-clear ng-class:$root.toolButtonIcon ion-plus" ng-click="$root.toolClick()"></button>
        <button class="button button-icon button-clear ion-ios-film" menu-toggle="right" ng-disabled="$root.getLogin() == null"></button>
          </span></div></ion-header-bar></div></ion-nav-bar>