Converting @ElementCollection to @ManyToMany CRUD Operations on Form having Select tag which populates dropdown list from another Form

I already have Basic CRUD operations running using AngularJS and Spring Boot App. I used $http GET, POST, DELETE, PUT methods and appropriate REST API’s End Points to call the Java Controllers.
Everything was working fine.
But, in my Project, we have to also add options to the Select tag’s options. So, to get options in Select tag, I had created another Model Class for that Select variable. And created one Form to add options in the dropdown list of that select Form. It was also working fine. Options were getting added to the dropdown list of the original form.

But, when I submitted the form with any Option selected, all the fields are getting submitted except that Select field. The select field is getting saved as Empty Array.

I tried using both methods like ng-options in Select tag and ng-repeat in option tag as well.
Nothing seems to work.

app.js File:    

var app = angular.module("productManager", []);
app.controller("productController", function($scope, $http){

    // Table Variables using products Object of Product.
    $scope.products = [];
    $scope.confirmDelete = false;

    // Input for TextBox Variables.
    $scope.productForm = {
        id : -1,
        proName : "",
        brands : "",
        madeIn : "",
        price : ""
    };




    // For Brand.
    $scope.brands = [];
    $scope.brandForm = {
            brandName : "",
    };
    $scope.submitBrand = function() {
        $http({
            method : "POST",
            url : '/brands/addBrand',
            data : angular.toJson($scope.brandForm),
            headers : {
                'Content-Type' : 'application/json'
            }
        }).then(_successBrand, _errorBrand);
    };
    function _successBrand(response) {
        _refreshBrandData();
        _clearBrandFormData();
    };
    function _errorBrand(response) {
        console.log("Error : " + response.statusText + ":" + response.data);
    };
    function _refreshBrandData(){
        $http({
            method : "GET",
            url : '/brands/getAllBrands'
        }).then(function success(response){// success
            $scope.brands = response.data;
        }, function error(response){// Error
            console.log("Error : " + response.status + ":" + response.data);
        });
    }
    function _clearBrandFormData() {
        $scope.brandForm.brandName = "";
    };




    // FUnction to GET all Data from Database.
    _refreshProductData();

    // For GET: To Get All Data.
    function _refreshProductData(){
        $http({
            method : "GET",
            url : '/products/getAllProducts'
        }).then(function success(response){// success
            $scope.products = response.data;
        }, function error(response){// Error
            console.log("Error : " + response.status + ":" + response.data);
        });
        _refreshBrandData();
    }

    // For POST and PUT: Submit Button.
    $scope.submitProduct = function(){

        var method = "";
        var url = "";
        if ($scope.productForm.id == -1) {
            method = "POST";
            url = '/products/addProduct';
        } else {
            method = "PUT";
            url = '/products/updateProduct';
        }

        $http({
            method : method,
            url : url,
            data : angular.toJson($scope.productForm),
            headers : {
                'Content-Type' : 'application/json'
            }
        }).then(_success, _error);
    };


    // Create New Product Button
    $scope.createNewProduct = function() {
        _clearFormData();
    };


    // Delete Product Button
    $scope.deleteProduct = function(product) {
        $http({
            method : "DELETE",
            url : '/products/deleteProduct/' + product.id
        }).then(_success, _error);
    };


    // Edit Product Button
    $scope.editProduct = function(product) {
        $scope.productForm.proName = product.proName;
        $scope.productForm.brands = product.brands;
        $scope.productForm.madeIn = product.madeIn;
        $scope.productForm.price = product.price;
        $scope.productForm.id = product.id;
    };

    // Success Function
    function _success(response) {
        _refreshProductData();
        _clearFormData();
    };

    // Error Function
    function _error(response) {
        console.log("Error : " + response.statusText + ":" + response.data);
    };

    // Clear Form Data
    function _clearFormData() {
        $scope.productForm.id = -1;
        $scope.productForm.proName = "";
        $scope.productForm.brands = "";
        $scope.productForm.madeIn = "";
        $scope.productForm.price = "";
    };
});






***************************








index.html File:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Product Catalogue</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script th:src = "@{/js/app.js}"></script>
</head>

<body ng-app = "productManager" ng-controller = "productController">
    <div align = "center">
        {{myOrderBy}}
        <h4>Product Manager : </h4>
        <form ng-submit = "submitProduct()">
            <table border = "0" cellpadding = "10">
                <tr>
                    <td>Product Id :</td>
                    <td>{{productForm.id}}</td>
                </tr>
                <tr>
                    <td>Product Name :</td>
                    <td><input type = "text" ng-model = "productForm.proName"/></td>                    
                </tr>
                <tr>
                    <td>Select a Brand :</td>{{ productForm.brands.brandName }} {{ productForm.brands }}
                    <td><select ng-model = "productForm.brands" ng-options = "x.brandName for x in brands"></td>
                </tr>
<!--                 <tr> -->
<!--                     <td>Select a Brand :</td>{{ productForm.brands }} -->
<!--                     <td><select ng-model = "productForm.brands"> -->
<!--                            <option ng-repeat = "x in brands" value = "{{x.brandName}}">{{ x.brandName }}</option> -->
<!--                     </td> -->
<!--                 </tr> -->
                <tr>
                    <td>Made In :</td>
                    <td><input type = "text" ng-model = "productForm.madeIn" /></td>
                </tr>
                <tr>
                    <td>Price :</td>
                    <td><input type = "text" ng-model = "productForm.price" /></td>
                </tr>
                <tr>
                    <td colspan = "2"><input type = "submit" value = "Submit" /></td>
                </tr>
            </table>
        </form>
        <button ng-click = "createNewProduct()">Create New Product</button>
    </div>



    <div align = "center">
        <h2>Add Brand : </h2>
        <form ng-submit = "submitBrand()">
            <table border= "0" cellpadding = "10">
                <tr>
                    <td>Enter Name of Brand : </td>
                    <td><input type = "text" ng-model = "brandForm.brandName" /></td>
                </tr>
                <tr>
                    <td colspan = "2"><input type = "submit" value = "submit" /></td>
                </tr>
            </table>
        </form>
    </div>



    <div align = "center">
        <h1>Product Catalogue : </h1>
        <br/>
        <input ng-model="searchByAny" ng-click = "resetSearchBy()" type="text" placeholder = "Enter Any" />
        <table border = "1" cellpadding = "10">
            <thead>
                <tr>
                    <td><input ng-model="searchBy.id" ng-click = "resetSearchByAny()" type="text" placeholder = "Enter Id" /></td>
                    <td><input ng-model="searchBy.proName" ng-click = "resetSearchByAny()" type="text" placeholder = "Enter Name" /></td>
                    <td><input ng-model="searchBy.brands" ng-click = "resetSearchByAny()" type="text" placeholder = "Enter Brand" /></td>
                    <td><input ng-model="searchBy.madeIn" ng-click = "resetSearchByAny()" type="text" placeholder = "Enter Made In" /></td>
                    <td><input ng-model="searchBy.price" ng-click = "resetSearchByAny()" type="text" placeholder = "Enter Price" /></td>
                </tr>
                <tr>
                    <th ng-click = "customOrderBy('id')">Product Id ??</th>
                    <th ng-click = "customOrderBy('proName')">Name ??</th>
                    <th ng-click = "customOrderBy('brands')">Brand ??</th>
                    <th ng-click = "customOrderBy('madeIn')">Made In ??</th>
                    <th ng-click = "customOrderBy('price')">Price ??</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat = "product in products>
                    <td>{{ product.id }}</td>
                    <td>{{ product.proName }}</td>
                    <td>{{ product.brands }}</td>
                    <td>{{ product.madeIn }}</td>
                    <td>{{ product.price }}</td>
                    <td>
                                <button ng-click = "editProduct(product)">Edit</button>
                                &nbsp;
                                <button ng-click = "deleteProduct(product)">Delete</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

Expected: When I Post the First Form, all the Fields should get submitted.

Actual: When I Post the First Form, all the Fields are getting submitted except tag’s field.

Source: AngularJS