title: Accessing controller values in view using AngularJS
body: <p>I am trying to display the values from a JSON nested array in a view using AngularJS.</p>
  
  <p>I have checked the output on a console.log() and the JSON object is returned as expected. But I want to display the details in my view. In particular I want to display them as all the high level values with their associated sub-level values.</p>
  
  <p>Here is my app.js that gets the JSON and iterates over it to get all the high level values and their associated sub-level items.</p>
  
  <pre><code>angular.forEach($scope.data, function(value, key)
  {
      // Gets the high level items - WORKING
      console.log("Check Item Description: " + value.checkitemdesc);
  
      angular.forEach(value.options, function(v, k)
      {
          // Gets the sub-level items - WORKING
          console.log("Check ID: " + v.fleetcheckid);
          console.log("Check Value Description: " + v.checkvaluedesc);
      });
  });
  </code></pre>
  
  <p>I want to then display the high level items in a Onsen UI <a href="http://components.onsen.io/" rel="nofollow">Switch in List Item Component</a></p>
  
  <pre><code>&lt;ul class="list"&gt;
      &lt;li class="list__item" ng-repeat="val in value"&gt;  
      {{val.checkitemdesc}} &lt;!-- NOT WORING HERE --&gt;
          &lt;label class="switch switch--list-item"&gt;
              &lt;input type="checkbox" 
                  class="switch__input" 
                  checked 
                  onclick="modal.show('modal')"&gt;
              &lt;div class="switch__toggle"&gt;&lt;/div&gt;
          &lt;/label&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>How do I access the array of values returned by the forEach loop? I tried to create an array inside my outer forEach loop and then push each value to it but get error saying value was <em>undefined</em></p>
  
  <pre><code>$scope.itemDescriptionArray.push(value.checkitemdesc);
  </code></pre>