openproject/frontend/app/components/wp-panels/watchers-panel/watchers-panel.directive.html

<div id="detail-panel-watchers"
     cg-busy="vm.loadingPromise">
  <div class="notification-box -error" ng-show="vm.error">
    <div class="notification-box--content">
      <p>{{ ::vm.text.loadingError }}</p>
    </div>
  </div>
  <div ng-hide="vm.error">
    <div class="work-package--watchers work-package--details--long-field"
         ng-class="{'-read-only': !vm.allowedToRemove}">
      <wp-watcher watcher="watcher"
                  ng-repeat="watcher in vm.watching track by watcher.id"></wp-watcher>
    </div>
    <div class="work-package--watchers-lookup" ng-if="vm.allowedToAdd">
      <form name="watcherForm" novalidate>
        <input type="text"
               class="wp-watcher--autocomplete typeahead-autocomplete"
               ng-class="{ '-error': vm.autocompleteInput.length && noResults }"
               ng-model="vm.autocompleteInput"
               op-fullwidth-typeahead
               typeahead-is-open="autocompleteIsOpen"
               typeahead-on-select="vm.addWatcher($model)"
               typeahead-no-results="noResults"
               typeahead-wait-ms="100"
               typeahead-template-url="/components/common/typeahead/users/typeahead-match.html"
               placeholder="{{ ::vm.text.autocomplete.placeholder }}"
               uib-typeahead="item as (item.name | htmlEscape) for item in vm.autocompleteWatchers($viewValue)">
      </form>
    </div>
  </div>
</div>