Design solution for multistep/multi-route component in angularjs 1.x

I have a large angularjs application. Now within that application I have a module that helps me create reports. Here is the requirement for the reporting module,

• Report creation consists of multiple steps.
• Each step has multiple data input points which may act as input for the next step.
• Each step has back and next button to navigate between steps.
• Each step has validation on inputs which will be shown as error when user clicks on the next button. Also if errors are there we dont allow the user to goto next step until the errors are fixed.
• The cumulative input for all the steps is shown as summary on last step for review.
• One last thing once a report is created I can open up the same report in edit mode, which basically is like create mode only but here the options will be prepopulated and I can edit or change those options.
• Also if user refreshes the browser on any step of report creation, he will be taken to starting step.

Now I want to design a solution for above, so here is what I came up with,

• Reporting module will be on an independent route.
• Each step will be a state under a main state ex. 'report.create.step1', 'report.create.step2', ..... 'report.create.step-n'. On click of next button we will navigate to next route.

• Each step will be an independent component that will be made up of smaller components that interact with the parent step component. Example in the last.

• A data-save-factory that will be injected into all steps. The purpose of this factory is to store user data for a particular step and also act as source of data for furture step. (Remember the selection on first step may act as input on second step)

• Each step component will have validation method that will perform validation by reading the values stored in data-save-factory. This validation function will be called on next click.

Here there is additional overhead of persisting the values across states because once you change the state the controller reloads and the component starts fresh. Our data-save-factory will give it necessary inputs to start from where it left.

My question is whether the above approach is the best one. Or can I do things in better way.

Structure of each step-component

<step-1>
  <input-component-1></input-component-1>
  <input-component-2></input-component-2>
</step-1>

Thanks in advance.