UI-router draw subview only after init function in parent state?

Question

Angular

Hello!
let's say we have such a hierarchy of routes

$stateProvider
      .state('root', {
        abstract: true,
        url : '/',
        templateUrl : '/views/root.html',
        controller : 'RootCtrl',
        resolve: resolver
      })
      .state('main2', {
        parent: 'root',
        url : 'main2/',
        templateUrl : '/views/main2.html',
        controller : 'MainCtrl2'
      })

root.html has the following structure

<div ng-init="init()">
  <section class="container main">
    <div class="row scrollreference" ng-style="style()">
      <div class="col-md-12" ui-view ng-if="initDone"></div>
    </div>
  </section>
</div>

RootCtrl contains a set of necessary checks and requests to the server, which in turn take a certain amount of time. When all requests are complete, it sets the initDone variable to true. I decided to use the initDone variable in order to delay the rendering and, accordingly, the execution of the code for MainCtrl2. And now the question is how wrong this approach is and how to implement it in a normal way?

Answer 1

wrong, the initial data needs to be loaded in state ah, and there will be no need to cut bicycles. more here