Angular and Select2 combined cant get the value to array

Question

I am working an a project and had to make a product list. but when I use select2 with the search option the value doesn't change and if I add a new row, I get a none select2 field. Could some help me out please? Or if you have other options to get the some result that would really Grateful. Sorry for my bad English.

$(document).ready(function() {
  $(".js-example-basic-single").select2();
});

var invoice = angular.module("invoice", []);
invoice.controller("InvoiceController", function($scope) {
  $scope.invoice = {
    items: [
      {
        name: "item",
        description: "item description",
        qty: 5,
        price: 5.5
      }
    ]
  };
  ($scope.add = function() {
    $scope.invoice.items.push({
      name: "",
      description: "",
      qty: 1,
      price: 0
    });
  }),
    ($scope.remove = function(index) {
      $scope.invoice.items.splice(index, 1);
    }),
    ($scope.total = function() {
      var total = 0;
      angular.forEach($scope.invoice.items, function(item) {
        total += item.qty * item.price;
      });
      return total;
    });
});

See the CodePen:

https://codepen.io/devtech_code/pen/bYBwaY

Answer 1

Use DOMNodeInserted event handler.

$('body').on('DOMNodeInserted', 'select', function () {
    $(this).select2();
});

$(document).ready(function() {
  $(".js-example-basic-single").select2();
});
$('body').on('DOMNodeInserted', 'select', function () {
    $(this).select2();
});
var invoice = angular.module("invoice", []);
invoice.controller("InvoiceController", function($scope) {
  $scope.invoice = {
    items: [
      {
        name: "item",
        description: "item description",
        qty: 5,
        price: 5.5
      }
    ]
  };
  ($scope.add = function() {
    $scope.invoice.items.push({
      name: "",
      description: "",
      qty: 1,
      price: 0
    });
  }),
    ($scope.remove = function(index) {
      $scope.invoice.items.splice(index, 1);
    }),
    ($scope.total = function() {
      var total = 0;
      angular.forEach($scope.invoice.items, function(item) {
        total += item.qty * item.price;
      });
      return total;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet"/>
<script src="http://select2.github.io/select2/select2-3.5.1/select2.js"></script>
<link href="http://select2.github.io/select2/select2-3.5.1/select2.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="invoice">

  <section class="row" ng-controller="InvoiceController">
    <table class="table table-hover">
      <thead>
        <tr>
          <th>Name</th>
          <th>Description</th>
          <th>Qty</th>
          <th>Price</th>
          <th>Total</th>
          <th>Delete</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in invoice.items">
          <td>
            <select ng-model="item.name" class="js-example-basic-single">
                        <option selected disabled>Choose Product</option>
                        <option>Beef</option>
                        <option>Fish</option>
                        <option>Pork</option>
                        <option>Chicken</option>
                        <option>Duck</option>
                    </select>
          </td>
          <td><input type="text" ng-model="item.description" class="form-control" /></td>
          <td><input type="number" ng-model="item.qty" class="form-control" /></td>
          <td><input type="number" ng-model="item.price" class="form-control" /></td>
          <td>{{item.qty * item.price}} €</td>
          <td><button type="button" class="btn btn-danger" ng-click="remove($index)">Delete</button></td>
        </tr>
        <tr>
          <td><button type="button" class="btn btn-primary" ng-click="add()">Add item</button></td>
          <td></td>
          <td></td>
          <td>Total : </td>
          <td>{{total()}} €</td>
        </tr>
      </tbody>
    </table>

    <pre>{{invoice.items}}</pre>
  </section>
</div>