Adding CheckBoxList of items to MVC 4 View

Question

I have the challenge of adding CheckBoxList of items to MVC 4 view. I have several models in the same the MVC 4 view. So I created the View Model below

public class ArticlesVM
{
    public article articles { get; set; }
    public game games { get; set; }        
    public gallery mgallery { get; set; }
    public team teams { get; set; }

    public ArticlesVM()
    {
        Teams = new List<TeamVM>();
    }
    public List<TeamVM> Teams { get; set; }
}

to include 4 models as it properties. I then created a view where each of the properties can be used independently as follows:

@model TeamBuildingCompetition.ViewModels.ArticlesVM

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout_new.cshtml";
}

<h2>Index</h2>

@using (Html.BeginForm("Create", "TBCArticles", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4></h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            @Html.LabelFor(model => model.articles.featuredImage, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-8">
                @Html.TextBoxFor(model => model.articles.featuredImage, new { @type = "file" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.games.gameName, "Select a Game", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-8">
                @Html.DropDownList("gameID", (IEnumerable<SelectListItem>)ViewBag.gameList, "Select Game", new { @class = "form-control" })
            </div>
        </div>

        <div class="form-group">
            @Html.HiddenFor(model => model.teams.teamID)
            @Html.HiddenFor(model => model.teams.teamName)
            @Html.DisplayFor(model => model.teams.teamName)
            <div class="col-md-8">
                @for(int i = 0; i < Model.Teams.Count; i++){
                    @Html.HiddenFor(model => model.Teams[i].ID)
                    @Html.CheckBoxFor(model => model.Teams[i].IsSelected)
                    @Html.LabelFor(model => model.Teams[i].IsSelected, Model.Teams[i].TeamName)
                }
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.articles.articleTitle, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-8">
                @Html.EditorFor(model => model.articles.articleTitle, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.articles.articleTitle, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.articles.articleContent, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-8">
                @Html.EditorFor(model => model.articles.articleContent, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.articles.articleContent, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.mgallery.picturePath, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-8">
                @Html.TextBoxFor(model => model.mgallery.picturePath, new { @type = "file", @multiple = "true" })
            </div>
        </div>


        <div class="form-group">
            <div class="col-md-offset-2 col-md-8">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Here is my TeamVM model below:

public class TeamVM
{
    public int ID { get; set; }

    [Required(ErrorMessage = "Please Enter Your Team Name")]
    [Display(Name = "Team Name")]
    public string TeamName { get; set; }

    [DisplayName("Team Picture")]
    [ValidateFile]
    public HttpPostedFileBase TeamPicture { get; set; }

    [Required]
    [Display(Name = "Description")]
    public string Description { get; set; }

    [Required(ErrorMessage = "Please Enter Team Content")]
    [Display(Name = "Content")]
    [MaxLength(500)]
    public string Content { get; set; }

    public bool IsSelected { get; set; }
}

Added the following to my controller action:

    [HttpGet]
    public ActionResult Index(ArticlesVM model)
    {
        model = new ArticlesVM ();
        model = new ArticlesVM();
        var teamList = (from p in db.teams
                     select new TeamVM()
                     {
                         ID = p.teamID,
                         TeamName = p.teamName,
                         IsSelected = p.IsSelected
                     });
        model.Teams = teamList.ToList();

        ViewBag.gameList = new SelectList(db.games, "gameID", "gameName");
        return View(model);
    }

And now have a null reference error in this portion of the view:

    <div class="form-group">
        @Html.HiddenFor(model => model.teams.teamID)
        @Html.DisplayFor(model => model.teams.teamName)
        <div class="col-md-8">
            @for(int i = 0; i < Model.Teams.Count; i++){
                @Html.HiddenFor(model => model.Teams[i].ID)
                @Html.CheckBoxFor(model => model.Teams[i].IsSelected)
                @Html.LabelFor(model => model.Teams[i].IsSelected, Model.Teams[i].TeamName)
            }
        </div>
    </div>