I've created a combo box with angular, and I've bound a scope variable to my input using ng-model. Right now the functionality is, you can search for an item in the dropdown. when you click on an item in the dropdown, that value is copied into the input.

however, when I go back into the input to search again, it only brings up items that match the search, which is expected. But I'd like to make it so when you click on the input again, the text that was in the input stays there, but the drop down shows all results.

is this doable? Maybe I can bind a different scope variable to the value of the input?

heres the fiddle: https://jsfiddle.net/mLsbmfb7/25/

html:

<div class='center' ng-app="myapp" ng-controller="appCont"> <div class='form-box'> <div class='inputs-box'> <div> <span>First</span> <input type='text' ng-model="firstname"/> </div> <div> <span>Last</span> <input type='text' ng-model="lastname"/> </div> </div> <div class='add-button' ng-click="addPerson()"> add </div> </div> <div class='ppl-list-title'> <div class='inputs-box'> <div class='inline-block-top find-word'>Find</div> <div class='inline-block-top'> <input id='filter-input' type='text' ng-model='filterText'/> <div> <ul class='hidden'> <li ng-repeat='person in people2 | filter:{fullName:filterText}' ng-click='setInputValue(person.fullName)'> <span class=''>{{person.fullName}}</span> </li> </ul> </div> </div> </div> </div> </div> 

controller and jquery:

var myapp = angular.module("myapp", []); myapp.controller('appCont', function($scope) { $scope.firstname = ""; $scope.lastname = ""; $scope.fullname = function() { return $scope.firstname + ' ' + $scope.lastname; }; var Person = function(){ this.firstname = ""; this.lastname = ""; this.isActive = true; this.fullName = ""; }; function getFullName(first, last) { return first + " " + last }; function getPerson(first, last, active) { var newPerson = new Person(); newPerson.firstname = first; newPerson.lastname = last; newPerson.isActive = active; newPerson.fullName = first + ' ' + last; return newPerson; }; $scope.addPerson = function() { var personToAdd = getPerson($scope.firstname, $scope.lastname, true); $scope.people2.push(personToAdd); $scope.firstname = ''; $scope.lastname = ''; }; $scope.setInputValue = function(full) { $scope.filterText = full; }; $scope.people2 = [ getPerson("first", "test", true), getPerson("second", "try", false), getPerson("third", "testing", true)]; }); $(document).ready(function() { $('#filter-input').on('focusin', function() { $('ul').slideToggle(); }); $('#filter-input').on('focusout', function() { $('ul').slideToggle(); }); }); function stringFullTrim(word) { while(word.indexOf(' ') > -1) { word = word.replace(' ', ' '); } return word.trim(); }