Select2 function is not working in angular js dynamic form

Question

hi every one I am working on angular js project. But here is a little problem i am using dynamic form for multiple fields and using select2 function for search but first time it is working then after making new field it is not working for search can you please help me??

here is my controller code for making dynamic field

$scope.choices = [{id: 1,purchaser_account:'',price:0,weight:0}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
   $scope.choices.push({'id':newItemNo,purchaser_account:'',price:0,weight:0});
};

here is code of view

<div  data-ng-repeat="choice in choices">
                        <div class="row">                           
                          <div class="col-md-3">
                            <div class="form-group label-floating">
                                <label class="control-label urdu-lable"> خریدار کھاتہ</label>
                                <select ng-model="choice.purchaser_account" name="account{{choice.id}}" class="form-control select2" required>
                                <option ng-repeat="x in purchaserAccount" value="{{x.id}}">{{x.name}}</option>
                                </select>
                            </div>
                         </div>
                            <div class="col-md-2">
                                <div class="form-group label-floating">
                                    <label class="control-label urdu-lable" > وزن</label>
                                    <input type="text" id="weight" ng-model="choice.weight"  class="form-control" required="required">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group label-floating">
                                    <label class="control-label urdu-lable"> ریٹ</label>
                                    <input type="text" id="price" ng-model="choice.price"  class="form-control" required="required">
                                </div>
                            </div>

                            <div class="col-md-2">
                                <div class="form-group label-floating">
                                    <label class="control-label urdu-lable"> ٹوٹل</label>
                                    <div>{{((choice.price*(choice.weight/40))+((choice.price*(choice.weight/40))*.016)).toFixed(2)}}
                                    </div>
                                </div>
                            </div>


                            <div class="col-md-1">
                                <div class="form-group label-floating">
                                    <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
                                </div>
                            </div>
                        </div>                    
                    </div>
<button class="btn btn-info" ng-click="addNewChoice()">Add fields</button>    

can you please help me to solve out this problem

Answer 1

Initialize select on your angular add function.

$scope.choices = [{id: 1,purchaser_account:'',price:0,weight:0}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
   $scope.choices.push({'id':newItemNo,purchaser_account:'',price:0,weight:0});
   $(".select2").select2();
};

same initialize it where your are add first option in choice array.