Cannot Access Fields after adding Array to another Array

Question

I have an array of sections where a section is pushed into the array when the user clicks a checkbox. It is defined like this:

$scope.print = {
  sections:[] 
};

Once I have all of the selected Sections, I use a service to get a list of questions for each selected section like this:

var questions = [];
myService.getQuestions(id)
  .success(function (data) {
    questions = data;
  });

Then I assign the returned questions to the original array like this:

angular.forEach($scope.print.sections,
    function (value, key) {
        if (value.QuestionSectionID === id) {
            $scope.print.sections[key].questions = questions;
        }
    });

The assignment "seems" to work, but I am unable to access the particular fields in the questions array by their field names.

On my HTML page, I have this:

<div ng-repeat="ps in print.sections">
    <div>
        <h4>{{ps.vchSectionName}}</h4>
    </div>
    <div ng-repeat="section in ps.questions">
        <div ng-repeat="q in section">
            {{q.vchQuestionText}}
        </div>
    </div>
</div>

When I try to access the "q.vchQuestionText" field, my HTML is blank, however if I simple do the following:

<div ng-repeat="q in section">
  {{q}}
</div>

I can then see ALL of the information contained in each field of "q". But I need to access each field in "q" by it's name. What am I missing here?

Any assistance is greatly appreciated!

Answer 1

Okay, the reason I could display all the data in "q", but could not specify a field is because I had one too many ng-repeat directives.

All I needed was the following:

<div ng-repeat="ps in print.sections">
<div>
    <h4>{{ps.vchSectionName}}</h4>
</div>
    <div ng-repeat="q in ps.questions">
        {{q.vchQuestionText}}
    </div>
 </div>

Hopefully, this will help someone else. Thank you all for your help.