ASP.NET 4.5 MVC: Binding javascript array data to a child viewmodel of the viewmodel being posted

I'm pretty new to these more complex views with partial views and child viewmodels.

I have a main view which holds three partial views and viewmodels of the same type. Each of these partial views also holds another partial view with its' own viewmodel.

Like this (simplified):
public class GrantProjectViewModel
{
    public GrantProjectCountryGroupViewModel CountryGroupCategory1 { get; set; }
    public GrantProjectCountryGroupViewModel CountryGroupCategory2 { get; set; }
    public GrantProjectCountryGroupViewModel CountryGroupCategory3 { get; set; }
}
public class GrantProjectCountryGroupViewModel

    public AssignGrantProjectCountryGroupCountryViewModel AssignGrantProjectCountryGroupCountryViewModel;
}
public class AssignGrantProjectCountryGroupCountryViewModel
{
    public IEnumerable<int> CountryIDs { get; set; }
}

Create.cshtml (this holds the main form):

model GrantProjectViewModel

<div class="container-fluid">

        <section class="panel panel-default">
            <div class="panel-heading">
                <h2 class="panel-title">@SL.labelmobGrantProjectEconomyAndCountryCategorisation</h2>
            </div>
            <div class="panel-body">

                <div class="row">
                <div class="col-md-4">

                        @{  ViewData.TemplateInfo.HtmlFieldPrefix = "CountryGroupCategory1";
                            Html.RenderPartial("PartialViews/HandleGrantProjectCountryGroup", Model.CountryGroupCategory1);
                            ViewData.TemplateInfo.HtmlFieldPrefix = "";
                        }
                    </div>
                    <div class="col-md-4">
                        @{
                            ViewData.TemplateInfo.HtmlFieldPrefix = "CountryGroupCategory2";
                            Html.RenderPartial("PartialViews/HandleGrantProjectCountryGroup", Model.CountryGroupCategory2);
                            ViewData.TemplateInfo.HtmlFieldPrefix = "";
                        }
                    </div>
                    <div class="col-md-4">
                        @{
                            ViewData.TemplateInfo.HtmlFieldPrefix = "CountryGroupCategory3";
                            Html.RenderPartial("PartialViews/HandleGrantProjectCountryGroup", Model.CountryGroupCategory3);
                            ViewData.TemplateInfo.HtmlFieldPrefix = "";

                        }
                    </div>

                </div>
            </div>
        </section>
</div>

HandleGrantProjectCountryGroup.cshtml

@model GrantProjectCountryGroupViewModel
<section class="panel panel-default panel-sm">

    <div class="panel-body">
        <div class="col-md-8">
            @{
                var viewDataForCountryAssign = new ViewDataDictionary {{"GrantProjectCountryGroup", Model.GrantProjectCountryGroupID}, {"CategoryNumber", Model.CategoryNumber}};
            }
            @Html.Partial("PartialViews/AssignCountriesToCountryGroup", Model.AssignGrantProjectCountryGroupCountryViewModel, viewDataForCountryAssign)

            <ul class="list-group" id="countries"></ul>

        </div>

    </div>
</section>

This is about as far I have come with AssignCountriesToCountryGroup.cshtml and the javascript part. (this is where I'm stuck)

@model AssignGrantProjectCountryGroupCountryViewModel

<div id="[email protected]">
    @Html.EditorFor(x => x.CountryID)
</div>
<div class="list-group" id="[email protected]"></div>


<script id='[email protected]' type='text/html'>
    <span class="label label-info label-country">__country_name__ &nbsp<i data-country-id='__country_id__' class="fa fa-remove button-remove-country"></i></span>
</script>


<script type="text/javascript">

    $(function () {
        var selectedCountryIDs = {};
        $('#[email protected] input[name=CountryID]').change(function () {
            var countryID = $(this).val();

            // Check that we have a valid personID
            if (!$.isNumeric(countryID)) {
                return;
            }

            var countryName = $('#[email protected] #CountryID_autoCompleteSelector').val();

            if (!selectedCountryIDs.hasOwnProperty(countryID)) {
                var selectedCountriesTemplate = $('#[email protected]')
                    .text()
                    .replace(/__country_name__/gi, countryName)
                    .replace(/__country_id__/gi, countryID)
                    .trim();

                $('#[email protected]')
                    .append(selectedCountriesTemplate);

                selectedCountryIDs[countryID] = true;
            }

            // Remove the personid and empty the input box
            $(this).val('');
            $('#[email protected] #CountryID_autoCompleteSelector').val('');
        });

        $("#[email protected]").on("click", ".button-remove-country", function () {
                var countryID = $(this).data("country-id");
                $(this).parents("span:first").remove();
                delete selectedCountryIDs[countryID];
        });

        $(".btn-submit-project").click(function () {
            var countryIDsArray = new Array();
            for (var countryID in selectedCountryIDs) {
                countryIDsArray.push(countryID);
            }

            var errorMessage = '';
            if (countryIDsArray.length === 0) {
                errorMessage += '@String.Format(SL.labelAlertErrorYouHaveToSelectAtLeastX, SL.labelPerson)';
            }
            if (errorMessage) {
                alerts.error(errorMessage);
                return;
            }


            var model = {
                CountryIDs: countryIDsArray,
            };

The partialView for AssignGrantProjectCountryGroupCountryViewModel has javascript for autocompleting a search of countries and adding multiple to a javascript array. The functionality is to add a set of countries to each of these three GrantProjectCountryGroupViewModel.AssignGrantProjectCountryGroupViewModel and then post the entire GrantProjectViewModel to the Post-action in the controller.

But when I do that all of the AssignGrantProjectCountryGroupViewModel-s are null. I'm pretty stuck and don't really know how I'm supposed to get the javascript-country data to stick to my GrantProjectViewModel when posting the main form.

(Other solutions tell me to post the javascript array to another controller action, which I am able to do. The problem then is that I don't know how to bind it to the parent GrantProjectViewModel properly.)