autocomplete

by Danish Farman

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<div ng-app='MyModule' ng-controller='DefaultCtrl'>
        
    <button class="btn btn-primary" ng-click="addCategory(selected, 8)">Add New Category</button>   
    
    <div>
        <input auto-complete ui-items="uinames" ng-model="selected" />
    </div>
    
    <div ng-repeat="n in names">
        <div ng-show="n.nameFlag">
            <label>
            {{n.name}}
            <input type="checkbox" required
                           ng-model="n.nameFlag" />
            </label>
        </div>    
   </div>
        
</div>

JavaScript

var MyModule = angular.module('MyModule', []);
MyModule.controller('DefaultCtrl', ['$scope', function ($scope) {
    $scope.names = [{name:"john",nameFlag:true}, 
                    {name:"bill", nameFlag:true}, 
                    {name:"charlie", nameFlag:true},
                    {name:"robert", nameFlag:true},
                    {name:"alban", nameFlag:false},
                    {name:"oscar", nameFlag:false},
                    {name:"marie", nameFlag:false},
                    {name:"celine", nameFlag:true},
                    {name:"brad", nameFlag:true},
                    {name:"drew", nameFlag:true},
                    {name:"rebecca", nameFlag:true},
                    {name:"michel", nameFlag:true},
                    {name:"francis", nameFlag:true},
                    {name:"jean", nameFlag:false},
                    {name:"paul", nameFlag:false},
                    {name:"pierre", nameFlag:false},
                    {name:"nicolas", nameFlag:true},
                    {name:"alfred", nameFlag:true},
                    {name:"gerard", nameFlag:false},
                    {name:"louis", nameFlag:false},
                    {name:"albert", nameFlag:false},
                    {name:"edouard", nameFlag:false},
                    {name:"benoit", nameFlag:false},
                    {name:"guillaume", nameFlag:false},
                    {name:"nicolas", nameFlag:false},
                    {name:"joseph", nameFlag:false},
                    {name:"danish",nameFlag:true}];
    $scope.uinames = [];
    $scope.names.forEach(function (value) { 
        $scope.uinames.push(value.name);
    });
    $scope.addCategory = function (selectedname, postId) {
        $scope.names.push(selectedname);
        // save selectedname to the database with put call
        //$http.put('/blog/updatecategorybyid/', { params : { selectedname : selectedname, postId : postId } });         
    };
    
}]);
MyModule.directive('autoComplete', ['$timeout',...