<div class="maincontent">
    <div ng-app="autocompleteCustomTemplateDemo" ng-controller="DemoCtrl as ctrl" class="container container1">
        <div class="row">
            <div class="col-lg-12 col-sm-12">
                <h4><strong> Service</strong></h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <md-content layout-padding layout="column">
                    <form ng-submit="$event.preventDefault()">
                        <md-autocomplete ng-disabled="ctrl.isDisabled" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-search-text- change="ctrl.searchTextChange(ctrl.searchText)" md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)"
                        md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.product_name" md-min-length="0" placeholder="Pick an Angular repository" md-menu-class="autocomplete-custom-template">
                            <md-item-template>
                                <span class="item-title">
                            <span> {{item.product_gid}} </span>
                                </span>
                                <span class="item-metadata" ng-model="g1" ng-click="type(g1)">
                            <span>
                            <strong>{{item.product_name}}</strong>
                            </span>
                                </span>
                            </md-item-template>
                        </md-autocomplete>
                        <div class="row">
                            <div class="col-md-12 text-right">
                                <md-button ng-click="add()">ADD</md-button>
                            </div>
                        </div>
                        <br/>
                        <div class="row table-responsive" ng-show="show_servicelist">
                            <div class="col-md-12 col-lg-12 col-sm-12">
                                <table class="table table-striped table-bordered table-condensed table-hover md-primary" md-progress="deferred">
                                    <thead class="header">
                                        <tr style="text-align:center">
                                            <th>S No</th>
                                            <th>product name</th>
                                            <th>Quantity</th>
                                            <th style="text-align:center">Amount</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="service in services">
                                            <td>{{$index + 1}}</td>
                                            <td>{{service.product_name}}</td>
                                            <td><input type="text" ng-model="service.quantity" /></td>
                                            <td><input type="text" ng-model="service.amount" /></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="row">
                                    <div class="col-md-12 text-right">
                                        <md-button>Submit</md-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </md-content>
            </div>
        </div>
    </div>
</div>

JS

(function() {
    'use strict';
    angular
        .module('autocompleteCustomTemplateDemo', ['ngMaterial'])
        .controller('DemoCtrl', DemoCtrl);

    function DemoCtrl($timeout, $q, $log, $scope) {
        var self = this;
        $scope.services = [];
        
        $scope.add = function() {
            $scope.show_servicelist = true;
            $scope.services.push({
                product_name: self.selectedItem.product_name,
                quantity: "",
                amount: ""
            });
        };
        
        self.simulateQuery = false;
        self.isDisabled = false;

        self.repos = loadAll();
        self.querySearch = querySearch;
        self.selectedItemChange = selectedItemChange;
        self.searchTextChange = searchTextChange;


        function querySearch(query) {
            var results = query ? self.repos.filter(createFilterFor(query)) : self.repos,
                deferred;
            if (self.simulateQuery) {
                deferred = $q.defer();
                $timeout(function() {
                    deferred.resolve(results);
                }, Math.random() * 1000, false);
                return deferred.promise;
            } else {
                return results;
            }
        }

        function searchTextChange(text) {
            $log.info('Text changed to ' + text);
        }

        function selectedItemChange(item) {
            $log.info('Item changed to ' + JSON.stringify(item));
        }


        function loadAll() {
            var repos = [{
                    'product_gid': '1',

                    'product_name': 'stabilizer',
                    'forks': '16,175',
                }, {
                    'product_gid': '2',

                    'product_name': 'stand',
                    'forks': '760',
                }, {
                    'product_gid': '3',

                    'product_name': 'ac',
                    'forks': '1,241',
                },

            ];
            return repos.map(function(repo) {
                repo.value = repo.product_name.toLowerCase();
                return repo;
            });
        }


        function createFilterFor(query) {
            var lowercaseQuery = angular.lowercase(query);

            return function filterFn(item) {
                return (item.value.indexOf(lowercaseQuery) === 0);
            };

        }
    }
})();

I'm running the following code to display the value in the autocomplete after selecting the add button. I need the value to list one after another after clicking the add button. I have used a material for this. please guide me, and modify the code. The above code just displays the list empty, how to store a value in the list and allocate in order.