angularjs - After text input model set, angular search filter breaks -

i'm writing combobox directive, , having trouble it. setup when clicks input, shows options in dropdown, , type, filters results. if click on result, should populate input value.

unfortunately, seem have done wrong, when click on result, populates field, if erase values of field, rather returning original search, parses through result selected. shows values typing searches through values match search text , clicked value.

how directive called:

<combobox data="combobox.systems" results="systemsearch" placeholder="system"></combobox> 

directive html:

<div class="combobox" ng-click="$event.stoppropagation()">     <input type="text" ng-model="search.value" search-id="search.id" ng-class="{ resultsopen: showdropdown }" ng-change="revealdropdown()" ng-focus="revealdropdown()" ng-blur="hidedropdown()">     <a class="dropdown" ng-click="toggledropdown($event)"></a>     <div class="results" ng-show="showdropdown">         <a ng-repeat="set in data | filter: { value: search.value }" ng-mousedown="setbox($event, set)" ng-bind-html="set.value | trusthtml"></a>     </div> </div> 

directive code:

directive('combobox', ['$filter', function ($filter) {     return {         restrict: 'e',         templateurl: 'combobox.html',         scope: {             'data': '=data',             'search': '=results'         },         link: function (scope, element, attrs) {             scope.search = { id: '', value: '' };             if (typeof attrs.placeholder != 'undefined')                  element.find('input').attr('placeholder', attrs.placeholder);             scope.showdropdown = false;             if (typeof scope.data == 'undefined')                  scope.data = [];              scope.toggledropdown = function ($event) {                 $event.stoppropagation();                 scope.showdropdown = scope.showdropdown?false:true;             };             scope.revealdropdown = function () {                 if ((isnan(scope.search) || scope.search.length == 0) && $filter('filter')(scope.data, scope.search).length)                      scope.showdropdown = true;                 else                      scope.showdropdown = false;             };             scope.hidedropdown = function () {                 scope.showdropdown = false;             };             $('html').click(function () {                 scope.hidedropdown();                 scope.$apply();             });              scope.setbox = function ($event, set) {                 scope.search = set;             }         }     } }]) 

i did figure out changing setbox method

scope.setbox = function ($event, set) {     scope.search = angular.copy(set); } 

helped little, didn't solve problem. i've made plunker try help: http://plnkr.co/edit/wyfvegdyavupzcowdbsz

appreciate in solution , telling me i've done wrong.

this should work:

scope.setbox = function ($event, set) {     scope.search.value = set.value; }; 

and if need keep record of selected item:

scope.setbox = function ($event, set) {     scope.search.value = set.value;     scope.selected = angular.copy(set); }; 

also, don't need pass $event , set setbox method, like:

scope.setbox = function () {     scope.search.value = this.set.value;     scope.selected = angular.copy(this.set); };