0

I have written code for autocomplete where on ng-change im getting the data from the data base and displaying the autocomplete content in the form of a list. On click of the data from the list i want to display that data in the input box using ng-model, But I'm unable to do that.

Below is my html code:

<div class="input-group">
                <input type="text" class="form-control dropdown-toggle" data-toggle="dropdown" placeholder="add question list" ng-model="qList" aria-describedby="basic-addon2" ng-change="fnAutocompleteQList(qList)">
                <div class="dropdown-menu menu-width">
                    <ul ng-repeat="value in aAutocompleteQList">
                        <li ng-click="fnfnAutoQList(qList)">{{value.quesList.quesListName}}</li>
                    </ul>                        
                </div>
                <span class="input-group-addon btn-primary textColor" style="cursor:pointer" id="basic-addon2" ng-click="fnAddQuestionList(questionList)">add question list</span>
            </div>

Below is my controller code

$scope.fnAutocompleteQList = function(qList) {
        var oGetQListPromise = searchBoxService.fnGetQuestionsList(qList);
        oGetQListPromise.then(function(response) {
            $scope.aAutocompleteQList = response;
        });
    };
    $scope.fnAutoQList = function(qListName) {
        $scope.qList = qListName;           
    };
Muhammad Hassan
  • 475
  • 2
  • 14
Shikha thakur
  • 1,269
  • 13
  • 34
  • This looks like a classic problem of not using an object in `ng-model`. Make `qlist` an object in scope and assign property value instead and problem will likely disappear – charlietfl May 22 '16 at 15:38
  • See: http://stackoverflow.com/questions/17606936/angularjs-dot-in-ng-model. Watch the 3 minute video linked in main answer – charlietfl May 22 '16 at 15:40
  • your function name mismatch in view `fnfnAutoQList(qList)` and in controller `fnAutoQList` check it out – Pitabas Prathal May 22 '16 at 15:42