Having worked on a similar questionnaire application with a structured approach, I utilized a back-end API that showcased a tree-like relationship structure.

It is essential to integrate this system into a back end rather than just writing it out manually, as it could lead to complications resembling a callback nightmare.

You can find the initial project setup on GitHub here. It leverages Loopback for data modeling and connects to an Angular front-end, but feel free to customize the back-end according to your preferences.

The core concept involves querying a primary question, which then branches out to multiple child answers, each linked to another question, forming a cascading effect. The emphasis lies on defining the relationships between different models.

This method allows you to develop a controller where selecting, say, answerC to questionA triggers a database query for the associated questionC object along with all its linked answers.

Subsequently, you can append the newly retrieved questionC and its answers to the main question array and navigate through them accordingly.

For illustration purposes, here's a simplified pseudo-code snippet:

//controller.js
app.controller('questionair', function(Answer, Question){
  //Load the first question along with its 3 related answers
  Question.findById({id: 1}, {include: 'answers'}).$promise
    .then(function(question){
      $scope.questions = [question];
    });

  //Function to fetch new question based on selected answer
  $scope.answerMe = function(questionId){
    Question.findById({id: questionId}, {include: 'answers'}).$promise
      .then(function(newQuestion){
        $scope.questions.push(newQuestion);
      },function(error){
        console.log('You\'ve answered the last question!');
      });
  };
});

//index.html
<div ng-repeat="question in questions">
   <h2>{{ question.text }}</h2>
   <ul>
     <li ng-repeat="answer in question.answers" 
         ng-click="answerMe(answer.questionId)">
       {{ answer.text }}
     </li>
   </ul>
</div>

As I was going through Mark Lagendijk's code in plunker, I discovered his solution for a task that involved recursion. By using a directive that calls itself, it is possible to represent a structure with multiple levels. The key component here is the service called RecursionHelper, which helps compile and avoid infinite loops in the directive. After adapting the code to suit my requirements, this was the result:

RecursionHelper

/* 
 * An Angular service which aids in creating recursive directives.
* @author Mark Lagendijk
* @license MIT
*/
angular.module('RecursionHelper', []).factory('RecursionHelper', ['$compile', function($compile){
return {
    /**
     * Manually compiles the element, fixing the recursion loop.
     * @param element
     * @param [link] A post-link function, or an object with function(s) registered via pre and post properties.
     * @returns An object containing the linking functions.
     */
    compile: function(element, link){
        // Normalize the link parameter
        if(angular.isFunction(link)){
            link = { post: link };
        }

        // Break the recursion loop by removing the contents
        var contents = element.contents().remove();
        var compiledContents;
        return {
            pre: (link && link.pre) ? link.pre : null,
            /**
             * Compiles and re-adds the contents
             */
            post: function(scope, element){
                // Compile the contents
                if(!compiledContents){
                    compiledContents = $compile(contents);
                }
                // Re-add the compiled contents to the element
                compiledContents(scope, function(clone){
                    element.append(clone);
                });

                // Call the post-linking function, if any
                if(link && link.post){
                    link.post.apply(null, arguments);
                }
            }
        };
    }
};
}]);

questionTree Directive :

directives.directive('questionTree', function (RecursionHelper) {
return {
    restrict: "AE",
    scope: {
        items: "=",
    },
    priority: 500,
    replace: true,
    //I use templateURL but for simplicity I used inline template in this code
    template: function (el, attr) {
        var itemType = attr["itemType"];

        if (itemType == "question") {
            return '<ul>'+
                     '<li ng-repeat="item in items">'+
                         '<div ng-click="loadChildResponses(item);$event.stopPropagation();">{{item.Description}}</div>'+
    '<question-tree items="item.Responses" item-type="reponse"></question-tree>'+
                     '</li>'+
                   '</ul>';

        }
        else {
            return '<ul>'+
                       '<li ng-repeat="item in items">'+
                           '<div ng-click="loadChildQuestions(item);$event.stopPropagation();">{{item.Description}}</div>'+
                           '<question-tree items="item.ModelWizardQuestions" item-type="question"></question-tree>'+
                        '</li>'+
                      '</ul>';

        }

    },
    controller: function ($scope, $http) {
        $scope.loadChildResponses = function (item) {



            $http.get(siteUrls.GetReponses + "?QuestionID=" + item.QuestionID)
           .success(function (data) {
               if (data && data.length > 0) {
                   item.Responses = data;
               }
           });
        };

        $scope.loadChildQuestions = function (item) {



            $http.get(siteUrls.getChildQuestions + "?ResponseID=" + item.ResponseID)
           .success(function (data) {
               if (data && data.length > 0) {
                   item.Questions = data;
               }
           });
        };
    },
    compile: function (element) {
        // Use the compile function from the RecursionHelper,
        // And return the linking function(s) which it returns
        return RecursionHelper.compile(element);
    }
}
});

By starting with loading the first level of questions and attaching the questionTree directive, the application can handle N levels of recursion.

The HTML:

 <ul>
   <li ng-repeat="question in Questions">{{question.Description}}
      <ul>
         <li ng-repeat="response in question.Responses"><span>{{response.Description}}</span>
           <question-tree items="response.Questions" item-type="question"></question-tree>
          </li>
       </ul>
    </li>
 </ul>