Generate HTML in custom directive and $compile in AngularJS - angularjs

Question

PLUNKER:
https://plnkr.co/edit/IQpGhinzsHUUqmwbHFmQ?p=preview
I am trying to create a form that reads from some JSON and creates the relevant view. Each set of questions are in their own step. I am having trouble getting access to each input to validate it using AngularJS.
How do I get access to the answers model that is created in the forEach loop?
HTML:
<form ng-app="MyApp" novalidate >
<section class="question step " ng-controller="StepController">
<div class="step-contents">
{{title}}
<step-contents content="content" ></step-contents>
</div>
<button >Prev</button>
<button ng-click="nextStep(content)">Next</button>
</section>
</form>
My AngularJS:
var app = angular.module('MyApp', []);
app.controller('StepController', function($scope) {
$scope.index = 0;
$scope.nextStep = function() {
console.log($scope.answers); // This should be the input data for _THIS_ step only
}
$scope.showStep = function() {
//FOREACH HAPPENS HERE
// Loops over some JSON to generate the following HTML:
$scope.title = "Step 1 title";
var html = '<input type="number" ng-model="answers.amount" />';
html += '<input type="text" ng-model="answers.name" />';
$scope.content = html;
//FOREACH ENDS HERE
}
$scope.showStep();
});
app.directive('stepContents', function ($compile) {
var linker = function(scope, element, attrs){
element.html(scope.content);
$compile(element.contents())(scope);
};
return {
restrict: 'E',
link: linker,
scope: {
content: '=',
},
};
});

Answer 1

Give a name to your form, and then you can access the form elements with $scope.formName.inputName, which will reference the ngModelController of the input. Check out Angular's documentation for ngFormController and ngModelController for more details.