Wallet/public/views/modals/addressbook.html

<ion-modal-view ng-controller="addressbookModalController" ng-init="initAddressbook()">
  <ion-header-bar align-title="center" class="bar-royal">
    <button class="button button-clear" ng-click="closeAddressbookModal()">
      Close
    </button>
    <div class="h1 title">
      <span ng-show="!addAddressbookEntry" translate>Addressbook</span>
      <span ng-show="addAddressbookEntry" translate>Add entry</span>
    </div>
    <button class="button button-clear"
            ng-click="toggleAddAddressbookEntry()">
      <i ng-show="!addAddressbookEntry" class="icon ion-ios-plus-empty"></i>
      <span ng-show="addAddressbookEntry" translate>Cancel</span>
    </button>
  </ion-header-bar>

  <ion-content>

    <div class="bar bar-header item-input-inset" ng-show="!addAddressbookEntry && !isEmptyList">
      <label class="item-input-wrapper">
        <i class="icon ion-ios-search placeholder-icon"></i>
        <input type="search"
               placeholder="Search"
               ng-model="addrSearch"
               ng-change="findAddressbook(addrSearch)" ng-model-onblur>
      </label>
    </div>

    <div ng-show="!addAddressbookEntry">
      <ion-list>
        <ion-item ng-repeat="addrEntry in addressbook"
                  class="item-icon-left"
                  ng-show="!addrEntry.isWallet"
                  ng-click="sendTo(addrEntry)">
          <i class="icon ion-ios-person-outline"></i>
          <h2>{{addrEntry.label}}</h2>
          <p>{{addrEntry.address}}</p>

          <ion-option-button class="button-assertive" ng-click="remove(addrEntry.address)">
            <i class="icon ion-minus-circled"></i>
          </ion-option-button>

        </ion-item>
      <ion-list>
      <div class="list" ng-show="isEmptyList">
        <a class="item item-icon-left" ng-click="toggleAddAddressbookEntry()">
          <i class="icon ion-person-add"></i>
          <span translate>Add a new entry</span>
        </a>
      </div>
    </div>

    <form name="addressbookForm" ng-show="addAddressbookEntry" no-validate>

      <div class="list">

        <label class="item item-input item-stacked-label">
          <span class="input-label" translate>Address</span>
          <div class="input-notification">
            <i class="icon ion-checkmark-circled balanced"
               ng-show="!addressbookForm.address.$invalid"></i>
            <i class="icon ion-close-circled assertive"
               ng-show="addressbookForm.address.$invalid && addressbookEntry.address"></i>
          </div>
          <div class="qr-scan-icon">
            <qr-scanner on-scan="onQrCodeScanned(data, addressbookForm)"></qr-scanner>
            <input type="text"
                   id="address"
                   name="address"
                   ng-model="addressbookEntry.address"
                   valid-address required>
          </div>
        </label>

        <label class="item item-input item-stacked-label">
          <span class="input-label" translate>Label</span>
          <input type="text"
                 id="label"
                 name="label"
                 ng-model="addressbookEntry.label"
                 required>
        </label>
      </div>

      <div class="padding">
        <button type="submit"
                class="button button-block button-positive"
                ng-click="add(addressbookEntry)"
                ng-disabled="!addressbookForm.$valid" translate>
          Save
        </button>
      </div>

    </form>
  </ion-content>
</ion-modal-view>