Array of elements is not working correctly - angularjs

Question

I have the following mongoose schema
var MySchema = new Schema({
field1: [{
format: {
type: String,
required: true
},
value: {
type: String,
required: true
}
}],
field2: [{
format: {
type: String,
required: true
},
value: {
type: String,
required: true
}
}]
});
To get the input for this model I am creating a form which has the array of controls and the code is below
Even If if try to use the $scope.field1[<index>] it give the error that
TypeError: Cannot read property 'field1' of undefined
<div class="form-group">
<div class="col-md-12 padding-left-0">
<label for="question">Field1 Values</label>
</div>
<div class="col-md-12" ng-repeat="(optionKey, optionValue) in [0,1]">
<ng-form name="field1Form{{optionKey}}">
<div class="col-md-2" ng-class="{ 'has-error' : submitted && field1Form{{optionKey}}.field1_format.$invalid }">
<label for="field1_format">Type</label>
<select class="form-control" name="field1_format" id="field1_format" data-ng-model="form.field1[$index].format" required>
<option value="text" selected="selected">Text</option>
<option value="image">Image</option>
</select>
<div ng-show="submitted && field1Form{{optionKey}}.field1_format.$invalid" class="help-block">
<p ng-show="field1Form{{optionKey}}.field1_format.$error.required">Field1 type is required</p>
</div>
</div>
<div class="col-md-10" ng-class="{ 'has-error' : submitted && field1Form{{optionKey}}.field1_value.$invalid }">
<div class="col-md-12">
<label for="field1_value">Value</label>
</div>
<div class="col-md-12">
<input type="text" class="form-control" name="field1_value" id="field1_value" data-ng-model="form.field1[$index].value" placeholder="Enter field1 value" required/>
<div ng-show="submitted && field1Form{{optionKey}}.field1_value.$invalid" class="help-block">
<p ng-show="field1Form{{optionKey}}.field1_value.$error.required">Field1 value is required</p>
</div>
</div>
</div>
</ng-form>
</div>
</div>
<div class="form-group col-md-12 padding-left-0" data-ng-show="true">
<div class="col-md-12 padding-left-0"><label>Field2 Values</label></div>
<div class="col-md-6" data-ng-repeat="i in [0,1]">
<ng-form name="field2Form{{i}}">
<label>Value-{{i+1}}</label>
<div class="col-md-12">
<div class="col-md-4" ng-class="{ 'has-error' : submitted && field2Form{{i}}.field2_format.$invalid }">
<label for="field2_format">Type</label>
<select class="form-control" name="field2_format" id="field2_format" data-ng-model="form.field2[$index].format" required>
<option value="text">Text</option>
<option value="image">Image</option>
</select>
<div ng-show="submitted && field2Form{{i}}.field2_format.$invalid" class="help-block">
<p ng-show="field2Form{{i}}.field2_format.$error.required">Field2 type is required</p>
</div>
</div>
<div class="col-md-7" ng-class="{ 'has-error' : submitted && field2Form{{i}}.field2_value.$invalid }">
<label for="field2_value">Value</label>
<input type="text" class="form-control" name="field2_value" id="field2_value" data-ng-model="form.field2[$index].value" placeholder="Enter Value {{i+1}}" required/>
<div ng-show="submitted && field2Form{{i}}.field2_value.$invalid" class="help-block">
<p ng-show="field2Form{{i}}.field2_value.$error.required">Field2 value is required</p>
</div>
</div>
</div>
</ng-form>
</div>
</div>
But in the angular controller I am getting the array of object values for field2 but field1 is not coming (missing) from the form data.
But when I hard code the question array like below for field1 then field1 also work fine
<div class="form-group">
<div class="col-md-12">
<ng-form name="field1Form0">
<div class="col-md-2" ng-class="{ 'has-error' : submitted && field1Form0.field1_format.$invalid }">
<label for="field1_format">Type</label>
<select class="form-control" name="field1_format" id="field1_format" data-ng-model="form.field1[0].format" required>
<option value="text">Text</option>
<option value="image">Image</option>
</select>
<div ng-show="submitted && field1Form0.field1_format.$invalid" class="help-block">
<p ng-show="field1Form0.field1_format.$error.required">Field1 type is required</p>
</div>
</div>
<div class="col-md-10" ng-class="{ 'has-error' : submitted && field1Form0.field1_value.$invalid }">
<div class="col-md-12">
<label for="field1_value">Value</label>
</div>
<div class="col-md-12">
<input type="text" class="form-control" name="field1_value" id="field1_value" data-ng-model="form.field1[0].value" placeholder="Enter field1" required/>
<div ng-show="submitted && field1Form0.field1_value.$invalid" class="help-block">
<p ng-show="field1Form0.field1_value.$error.required">Question value is required</p>
</div>
</div>
</div>
</ng-form>
</div>
</div>
Can anyone help me in this?

Answer 1

It seems like some angular issue.
It has been fixed by declaring the variable in angular Controller like below
$scope.form = {};
$scope.form.field1 = {};
Now its working fine. May be the issue in auto declaring the nested objects or array in angular.

Answer 2

It very possible you've got a lot of things mixed up.
One of them you have already recognised - the scope didn't have a form property.
The expression field1Form{{optionKey}}.field1_format.$invalid is not valid, because string interpolation cannot be used in the context where it's found. As far as I know, ng-class and ng-show directives expect a JavaScript expression, not a template. My point is this clearly, the interpolation expression {{optionKey}}, should not be used in ng-class and ng-show directives.