Ui router nested views: how to check the general form?

Question

Available plunker here

I use angular ui-routernested views to implement a multi-stage form (a kind of wizard), and I am having trouble validating the form. The form is split in all subviews, but it looks like validation only affects the newsted view where the submit button is located.

Nested Views:

$stateProvider
    .state('form', {
        url: '/form',
        templateUrl: 'form.html',
        controller: 'formController'
    })

    .state('form.step1', {
        url: '/step1',
        templateUrl: 'form-step1.html'
    })

    .state('form.step2', {
        url: '/step2',
        templateUrl: 'form-step2.html'
    });

I have one required input in each nested view:

form-step1.html:

<input type="text" name="required1" ng-model="formData.required1" required>

form-step2.html:

<input type="text" name="required2" ng-model="formData.required2" required>

In this nested view (las step of my wizard) I also have a submit button, disabled if the form is invalid:

<button ng-disabled="form.$invalid" ng-submit="submit">Submit</button>

, , (form-step1.html). , , requrired1 . , requrired1 , .

, : , ?

.

Answer 1

, , , - ( ) .

, (form-step1), , (form-step2), . , (form-step2 OP, ), . , , , .

form-step1.html:

<div>
    <label for="required1">Required 1</label>
    <input type="text" name="required1" ng-model="formData.required1" required>
</div>

<div>
    <button ng-disabled="form.$invalid" ui-sref="form.step2" type="button">Next</button>
</div>

.