How To Update Only The Named View Using Ui-router

I am creating a web app to help students in science, history and math. When you first land on the site I have a home/landing page. When you click get started I route to /exam/instr

Solution 1:

There is a working plunker

There is a similar Q & A in fact, with working plunker:

Angular UI Router - Nested States with multiple layouts

Solution here, is to move the static view from child to parent. It won't be reloaded for each child (view is reloaded only if parent state is changed). We will use absolute naming (see included links for more details)

So this is the code adjustment

.state('exam', {
    url: '/exam/:step',
    abstract: true,
    // the root view and the static pagination view
    // will be defined here, so we need views : {}
    views: {
      '':{
        templateUrl: 'app/state-exam/exam.html',
        controller: 'ExamController',
        controllerAs: 'examController',
      },
      // absolute naming targets the view defined above
      'exam-pagination@exam':{
        templateUrl: 'app/state-exam/exam-pagination.html'
      },
    }
  })

  .state('exam.instructions', {
    url: '/instructions',
    views: {
      //'exam-pagination':{}, //defined in parent
      'exam-detail' : {
        templateUrl: 'app/state-exam/exam-instructions.html'
      }
    }
  })

  .state('exam.math', {
    url: '/math',
    views: {
      //'exam-pagination':{}, //defined in parent
      'exam-detail' : {
        templateUrl: 'app/state-exam/exam-math.html'
      }
    }
  });

Also check this to get more details about absolute view naming

• Angular UI router nested views
• Angular-UI Router: Nested Views Not Working

The working example is here