title: Displaying nested JSON data in AngularJS
body: <p>I am building a cross platform app using Onsen UI, Monaca and AngularJS.</p>
  
  <p>I have a screen where the user can select from various <em>switches</em> using Onsen UIs built in switches (<a href="http://components.onsen.io/" rel="nofollow">Switch in List Item</a>). Toggling a switch means that vehicle check needs to be performed, else it is assumed that all checks have passed.</p>
  
  <p>I can display the Check Descriptions (checkitemdesc) as per the JSON below on the list item switches, but when I toggle any of the switches I want to be able to display their related "answers": [{...}] via a modal.</p>
  
  <p>So toggling the "<em>Engine oil level</em>" switch, the user sees a modal with the related checks that can be performed on the "Engine oil level" e.g. Low, top up etc.</p>
  
  <p><strong>JSON</strong> example of the data</p>
  
  <pre><code>[{
      "fleetcheckitemid": "1",
      "checkitemdesc": "Engine oil level",
      "answers": [{
          "fleetcheckid": "1",
          "checkvaluedesc": "Ok"
      }, {
          "fleetcheckid": "2",
          "checkvaluedesc": "Low"
      }, {
          "fleetcheckid": "3",
          "checkvaluedesc": "Top-Up Required"
      }]
  }, {
      "fleetcheckitemid": "2",
      "checkitemdesc": "Water level",
      "answers": [{
          "fleetcheckid": "1",
          "checkvaluedesc": "Ok"
      }, {
          "fleetcheckid": "2",
          "checkvaluedesc": "Low"
      }, {
          "fleetcheckid": "3",
          "checkvaluedesc": "Top-Up Required"
      }]
  }]
  </code></pre>
  
  <p>My <strong>checksController.js</strong> used for getting JSON from $http API call which returns a JSON object.</p>
  
  <pre><code>$http.get("http://myfakedomain/api/getfleetchecks.php?fleetid=109").success(function(data) 
  {
      $scope.checkItemDescriptions = data;
  });
  </code></pre>
  
  <p>And my <strong>checks.html</strong> for displaying switches based on "<em>checkitemdesc</em>" in JSON.</p>
  
  <pre><code>&lt;ul class="list"&gt;
      &lt;li class="list__item" ng-repeat="checkItemDescription in checkItemDescriptions"&gt;
          {{checkItemDescription.checkitemdesc}}
          &lt;label class="switch switch--list-item"&gt;
              &lt;input type="checkbox" 
                  class="switch__input" 
                  checked &gt;
              &lt;div class="switch__toggle"&gt;&lt;/div&gt;
          &lt;/label&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Selecting any of the switches should fire the modal and populate it with the relevant "answers": [{...}] values</p>
  
  <p><strong>modal</strong></p>
  
  <pre><code>&lt;ons-modal var="modal"&gt;
      &lt;div class="alert-dialog-mask"&gt;&lt;/div&gt;
      &lt;div class="alert-dialog alert-dialog--android"&gt;
          &lt;div class="alert-dialog-title alert-dialog-title--android"&gt;
              &lt;div style="text-align: center"&gt;Further Details&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="alert-dialog-content alert-dialog-content--android"&gt;
              &lt;div style="text-align: center; padding-top: 10px; padding-bottom: 15px; padding-left: 10px; padding-right: 10px;"&gt;
                  &lt;p&gt;
                      Please give further details for&lt;br&gt;
  
                      &lt;!-- Display the selected checkitemdesc here - NOT WORKING --&gt;
                      &lt;strong&gt;{{checkItemDescription[i].checkvaluedesc[i]}}&lt;/strong&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
  
              &lt;!-- Display sub-options for main sections - NOT WORKING--&gt;
              &lt;div style="text-align: left; padding-top: 10px; padding-bottom: 15px; padding-left: 10px; padding-right: 10px;"&gt;
                  &lt;!-- Display the selected subitems here - NOT WORKING --&gt;
                  &lt;label class="checkbox" ng-repeat="checkItemDescription in checkItemDescriptions[i].answers[i].checkvaluedesc"&gt;
                      &lt;input type="checkbox"&gt;
                      &lt;div class="checkbox__checkmark"&gt;&lt;/div&gt;
                          &lt;!-- Display the selected subitems here - NOT WORKING --&gt;
                          {{checkItemDescription[i].answers[i].checkvaluedesc}}
                  &lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/ons-modal&gt;
  </code></pre>
  
  <p>I am able to display the main checks, but how do I do individual checks on each switch and then set the modal values based on that switch?</p>