Angularjs - dropdown not binding correctly AND not showing initial value

I am attempting to get data via a call to a WebApi within AngularJS. I have verified the service works and I am getting the correct data.

The problem(s) are that the selected item is not appearing AND the binding to the model for the result does not appear to be working.

I am a relative newbie in terms of AngularJS. Can somebody please tell me what I am doing wrong and how to correct the issues?

Thanks in advance!

Here is the angular code:

var app = angular.module("GreatWestSoftware", [])

app.controller("ContactMeByController",
    function ($scope, $http ,$window) {


        function GetContactByMethods($http) {
            //$scope.Message = 'NULL';
            //$scope.employees = {};
            $http.get('http://localhost:53350/api/ContactBy').then(function (response) {
                $scope.ContactByMethods = response.data;
                $scope.Message = 'OK';
                $scope.gotdata = true;
            },
            function (err) {
                $scope.Message = 'Call failed' + err.status + '  ' + err.statusText;
                $scope.ContactByMethods = {};
                $scope.gotdata = false;
            }
            );

            //window.setTimeout(function () {
            //    $scope.gotdata = true;
            //}, 1000);
        };



        function ShowAlert(msg)
        {
            $window.alert(msg);
        }
    }

);

Here is the model from MVC:

    public class SurveyAnswersHeaderViewModel

{
    public int ProductID { get; set; }

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


    [EmailAddress]
    [Display(Name = "Your Email Address:")]
    public string Email { get; set; }

    [Phone]
    [Display(Name = "Phone Number:")]
    [DataType(DataType.PhoneNumber,ErrorMessage ="Invalid Phone Number")]
    public string Phone { get; set; }

    [Required]
    [Display(Description ="How should you be contacted",Name ="Contact Me By:",Prompt ="Select contact method")]
    public int ContactBy { get; set; }
}

Here is the page I am attempting to load:

@model GreatWestSoftware.Models.SurveyAnswersHeaderViewModel

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Great West Software Site Survey";
}

@using (Html.BeginForm("Create", "SurveyAnswersHeader", FormMethod.Post))
{
    @Html.AntiForgeryToken()

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

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

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

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

            <div class="form-group">
                <div ng-app="GreatWestSoftware" ng-controller="ContactMeByController" ng-show="DisplayContactBy">
                    @Html.LabelFor(model => model.ContactBy, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10" >
                        <select id="ContactByDropdown" ng-model="ContactBy" class="form-inline">
                            <option ng-repeat="ContactByoption in ContactByMethods" ng-selected="{{ContactByoption.IsSelected==true}}" value="{{ContactByoption.ContactByID}}">{{ContactByoption.ContactMeBy}}</option>
                        </select>
                        @*@Html.EditorFor(model => model.ContactBy, new { htmlAttributes = new { @class = "form-control" } })*@
                        @Html.ValidationMessageFor(model => model.ContactBy, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
           <div>
               <h4 class="text-danger">@ViewBag.ErrorMessages</h4>
           </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Start Survey" class="btn btn-default" />
                </div>
            </div>
        </div>
}

<div>
    @Html.ActionLink("Skip", "Index","Home")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script src="~/Scripts/GreatWestSoftware.js"></script>
}

I do get the values of the dropdown. But oddly, in the generated code there is a . I'm guessing that this is showing up as the blank entry in the list. The dropdown is also not showing the selected initial value, even though the html seems correct.

The second problem is that on the submittal of the form, the selected value is not being bound to the MVC model.

Here is what appears in the dropdown. The correct data...

Here is the generated html code