Set ng-model to value value in scope? - angularjs

Question

I'm working on a simple angular app with two controllers:
function Invite($scope) {
$scope.fieldsets =
[
{
fields:
[
{
label: 'First Name',
name: 'firstname',
key: 'entry.810220554',
type: 'text',
required: true
},
{
label: 'Last Name',
name: 'lastname',
key: 'entry.1653030831',
required: true,
},
{
label: 'Email',
name: 'email',
key: 'entry.1727688842',
required: true,
type: 'email',
},
{
key: 'entry.1602323871',
type: 'radio',
labels:
[
{
name: 'media',
label: 'Media'
},
{
name: 'frilans',
label: 'Frilans'
}
],
}
],
}
];
}
function Questionnaire($scope, $http){
$scope.post = function(){
console.log();
$http.post('/signup.php', $scope.quiz).
success(function(data, status, headers, config){
console.log(data);
});
};
}
The Questionare-scope is a child of the invite scope. Here is simplified version of the layout
<div ng-controller="Invite">
<form ng-controller="Questionnaire" method="POST" ng-submit="post()">
<input ng-model="{{field.key}}" />
</form>
</div>
The first one generates a form where I want the key-values to be used as ng-model.
In the second scope, so that I can post them to the server with that key.
I first tried to use
<input ng-model="{{field.key}}" />
in my html template, this was my intuitive guess, but it rendered an error.
<input ng-model="field.key" />
this also giving error.
Here is a plnkr:
http://plnkr.co/edit/rnQXlCCFQypVLs20OuTt?p=preview

Answer 1

There is no object fields in the questionnaire scope. You may be able to reference the object to in the outer scope by using ng-repeat=field in $parent.fields, I'm not sure if nested scopes are related via prototypical inheritance.
Another approach would be to create a service that tracks fields and inject it into all the controllers that need access to the data.