> 
> Below is the template I am using for the directive. In code we are 
>  fetching the data from a service in that data we have all the
>  information of that particular person. And from that data we are 
>  showing only first name, last name and designtion or company
>  affiliation.
> 
> 
> 

```html
<div ng-if="model" class="entry-added">
  <span class="form-control"><b>{{model.fullName}}</b>, <br/><span class="small-font">{{(model.designation)?model.designation:model.companyAffiliation}}</span></span>
  <a ng-click="removePerson()" class="action-remove"><i class="fa fa-remove"></i></a>
</div>

<div ng-show="!model" class="input-group">
  <input type="text"
         class="form-control"
         name="{{name}}"
         id="{{name}}"
         placeholder="{{placeholder}}"
         ng-required="{{isRequired}}"
         typeahead-on-select = "change($item, $model, $label)"
         ng-model="model"
         typeahead-min-length="3",
         typeahead="suggestion for suggestion in searchEmployees($viewValue)"
         typeahead-template-url="typeAheadTemplate.html"
         typeahead-loading="searching"
         typeahead-editable="false">

<script type="text/ng-template" id="typeAheadTemplate.html">
  <a class="ui-corner-all dropdown" tabindex="-1">
    <div class="col-md-2"><img class="dropdown-image" ng-src="https://people.***.com/Photos?empno={{match.model.employeeNumber}}"></div>
    <div>
      <div bind-html-unsafe="match.model.fullName"></div>
      <div bind-html-unsafe="match.model.designation"></div>
    </div>
  </a>
</script>
```

I am using a custom directive to display a search field. The drop down is displaying `[object object]`.

**Directive**

```
// In backend taxDeptContact is a Person type object
/*
Directive code
 */
(function () {
  'use strict';
  angular.module('treasuryApp.directives').directive('employeeSearch', employeeSearch);
  employeeSearch.$inject = ['$resource', '$rootScope', 'ErrorHandler'];

  function employeeSearch($resource, $rootScope, ErrorHandler) {
    return {
      restrict: 'E',
      require: '^form',
      scope: {
        model: "=",
        isRequired: '@',
        submitted: "=",
        onSelect: '&',
        name: '@',
        index:'@'
      },
      link: function(scope, el, attrs, formCtrl) {
        //set required attribute for dynamically changing validations
        scope.searchEmployees = function (searchTerm) {
          var users = [];
          var myResult = [];
          var result = $resource($rootScope.REST_URL + "/user/getEmployees", {term: searchTerm}).query().$promise.then(function (value) {

            //console.log(value)
            $.each(value, function(i, o) {
              users.push(o);
            });
            return users;
          });
          return result;
        }
        scope.removePerson = function() {
          scope.model=null;
        }
        scope.userNotSelectedFromTypeahead = function(name) {
          if(undefined === formCtrl[name]) {
            return false;
          }
          return formCtrl[name].$error.editable;
        };
        scope.change = function(item, model, label) {
            scope.model = item
            scope.onSelect(
              {name: scope.name, person: scope.model});
        },

      templateUrl: 'app/components/common/directives/employee-search.tpl.html'
    };
  }
})();

```

**View that is using the directive**

```
<div class="form-group">
    <label class="col-sm-3>Tax Dept Contact</label>
    <div class="col-sm-4">
        <employee-search model="reqCtrl.requestObj.taxDepartmentContact" name="taxDeptContact" is-required="false" submitted="reqCtrl.submitted"/>
    </div>
</div>

```

**Image of the error occuring**
[![enter image description here](https://i.stack.imgur.com/9eP6K.png)](https://i.stack.imgur.com/9eP6K.png)