Elements in $scope missing from form - angularjs

Question

I have this form (shown after page loads with Angular filled in data):
<div ng-controller="ItemsController">
<form name="Items" class="form-horizontal ng-dirty ng-valid-parse ng-valid ng-valid-required ng-submitted" ng-submit="submit()" _lpchecked="1">
<input ng-model="item._token" name="_token" type="hidden" value="gej20f0RMOJypfL5n93Mon3QL6PjrrgWgZ20RnGe" class="ng-pristine ng-untouched ng-valid">
<input ng-model="item.no_label" name="no_label" type="hidden" value="1" class="ng-pristine ng-untouched ng-valid">
<fieldset>
<legend>Add New Item</legend>
<div class="form-group">
<label class="col-md-2 control-label" for="sku">SKU</label>
<div class="col-md-3">
<input id="sku" name="sku" ng-model="item.sku" type="text" placeholder="Enter SKU" class="form-control input-md ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="Name">Name</label>
<div class="col-md-5">
<input id="name" name="name" ng-model="item.name" type="text" placeholder="Optional name" class="form-control input-md ng-valid ng-dirty ng-valid-parse ng-touched">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="add"></label>
<div class="col-md-4">
<button id="add" name="add" class="btn btn-success">
<i class="fa fa-plus"></i> Add
</button>
<button id="cancel" name="cancel" class="btn btn-danger">Cancel</button>
</div>
</div>
</fieldset>
</form>
</div>
And this controller:
myApp.controller('ItemsController', ['$scope', '$http', function ($scope, $http) {
$scope.item = {};
$scope.submit = function () {
if ($scope.validate()) {
$http.post('/items/store', $scope.item)
.success(function (data) {
toastr['success']('Added ' + $scope.item.sku + ' to list.', 'Success!');
$scope.Items.$setPristine();
oTable.ajax.reload();
}).error(function (data) {
if ('error' in data)
toastr['error']('ERROR: ' + data['error'], 'Error!');
else
toastr['error'](JSON.stringify(data), 'Error!');
});
}
};
$scope.validate = function () {
return $.trim($scope.item.sku) != '';
};
}]);
Everytime I submit this form, the data in $scope.item is missing item._token and item.no_label.
Why and how do I correct this?

Answer 1

ng-model is used for two-way data binding. Since you are using hidden input elements, which can not be modified by or shown to users, there is no reason using ng-model. The less two-way binding, the better Perf would be.
So the best way to fix this issue is that add _token and no_label value to $scope.item in controller.
$scope.item = {
_token: 'gej20f0RMOJypfL5n93Mon3QL6PjrrgWgZ20RnGe',
no_label: 1
};
If you must add these elements in View, use one-way binding in View
<input name="_token" type="hidden" value="{{:: item._token}}" class="ng-pristine ng-untouched ng-valid">
<input name="no_label" type="hidden" value="{{:: item.no_label}}" class="ng-pristine ng-untouched ng-valid">
Check this pr to know more about how Angular guys think about data binding on hidden elements.

Answer 2

Instead of using the value attribute try using ng-value:
<input ng-model="item._token" name="_token" type="hidden" ng-value="gej20f0RMOJypfL5n93Mon3QL6PjrrgWgZ20RnGe" class="ng-pristine ng-untouched ng-valid">
<input ng-model="item.no_label" name="no_label" type="hidden" ng-value="1" class="ng-pristine ng-untouched ng-valid">
Another option is updating item like this:
$scope.item = {
_token: 'gej20f0RMOJypfL5n93Mon3QL6PjrrgWgZ20RnGe',
no_label: 1
};