ng-model on hidden razor input not working

Problem

In my MVC 5 Razor view, I created a hidden field, like this:

@Html.HiddenFor(x => x.FormData.UserId,
                new { ng_model = "selectedEmployee.userId" })

When I perform the necessary angular action to fill the selectedEmployee.userId property, the hidden input's value is not filled.

But, when I change it to

@Html.TextBoxFor(x => x.FormData.UserId,
                 new { ng_model = "selectedEmployee.userId" })

It's working and the data is posted to the server.

And

<input type="hidden" name="FormData.UserId" value="{{selectedEmployee.userId}}">

is working, but

@Html.HiddenFor(x => x.FormData.UserId,
              new { value = "{{selectedEmployee.userId}}" })

is not. (which probably has to do with Razor overwriting the HTML value)

What's the reason that in Razor a hidden input with an ng-model is not working?

Problem courtesy of: jao

Solution

Please change value into ng_value

@Html.HiddenFor(x => x.FormData.UserId,
              new { ng_value = "{{selectedEmployee.userId}}" })
Solution courtesy of: sylwester

Discussion

Here is how to assign a value to Hidden field. 'V' character of value attribute must be Capital letter.

<div data-ng-controller="MyFunction">
    @{Html.BeginForm("SchoolMedium", "BasicSetup", FormMethod.Post, new { });

    @Html.HiddenFor(s => s.SchoolMediumId, new { Value = "{{mascotmedium.SchoolMediumId}}" });


        Html.EndForm();
    }

and in controller

$scope.EditWhenAdded= function(row){           
 $scope.mascotmedium = row.entity;
};
Discussion courtesy of: Md. Nazrul Islam

This recipe can be found in it's original form on Stack Over Flow.