<div>
    <script type="text/ng-template" id="customTemplate.html">
        <a href="" class="suggestionlist-li-a">
            <div>
                <div style="margin-bottom:0;">
                    <div style="width: 100%; overflow: hidden;">
                        <div style="width: 36px; float: left;">
                            <div style="display:inline-block" wizdom365-presence-picture="" size="SMALLROUNDED" accountname="match.model.AccountName" email="match.model.WorkEmail" name="match.model.PreferredName"></div>
                        </div>
                        <div style="margin-left: 36px;">
                            <h3 class="suggestionslist-li-heading">
                                {{match.model.PreferredName}}
                            </h3>
                            <div class="suggestionlist-li-content">
                                {{match.model.WorkEmail}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </script>
    <div class="gamification">
        <input type="text"
               ng-model="userModel"
               placeholder="{{'Search' | translate}}"
               typeahead="item.PreferredName as item.PreferredName for item in searchPrincipal($viewValue)"
               typeahead-loading="searchPlaceholder"
               typeahead-no-results="noResults"
               typeahead-template-url="customTemplate.html"
               typeahead-min-length="2"
               typeahead-on-select="onSelect($item, $model, $label)"
               class="form-control">
        <i ng-show="searchPlaceholder" class="glyphicon glyphicon-refresh"></i>
        <div ng-show="noResults">
            {{'No Results Found' | translate}}
        </div>
    </div>
</div>