JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="example">
  <div ng-controller="mainController">

    <div  ng-repeat="product in products">
          <div class="row">
            <div class="col-lg-6">
              <div class="form-group">
                <label>Product</label>
                <select ng-model="product.product" ng-options="package.name for package in packages" class="form-control"></select>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="form-group">
                <label>Version</label>
                <div class="input-group m-b">
                  <select ng-model="product.versions" ng-options="version.number for version in product.versions" class="form-control"></select>
                  <span class="input-group-addon"><i class="fa fa-times"></i></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      <button ng-click="addProduct()">Add Product</button>
    </div>
</div>

JavaScript

var app = angular.module('example', []);
app.controller('mainController', function ($scope) {
   $scope.greeting = "Welcome to the application.";
    $scope.products = [{id: 1, name: '', versions: []}];

  $scope.packages = [];
  $scope.packages[0] = { id: 1, name: 'Product 1', versions: [{number: 1.0}, {number: 1.5}, {number: 2.0}]};
  $scope.packages[1] = { id: 2, name: 'Product 2', versions: [{number: 0.1}, {number: 0.2}, {number: 0.3}]};
  
    $scope.addProduct = function(){
    var id = $scope.products.length + 1;
    $scope.products.push({id: id, name: "", version: []});
                                                      
  };
});