title: Two array binding in one foreach loop in knockout JS
body: <p>Please look at my view model below:</p>
  
  <pre><code>viewModel = [
   {
    StudentName : 'Ronald',
    Reviews : [ '3/5', '2/5', '4/5'],
    TeacherNames : [ 'Nema', 'Sarah', 'Vilson']
    },
   {
    StudentName : 'Chris',
    Reviews : [ '4.5/5', '2.5/5', '3.5/5'],
    TeacherNames : [ 'Nema', 'Sarah', 'Vilson']
   }
  ]
  </code></pre>
  
  <p>In below HTML I am trying to display Reviews in nested foreach structure. Reviews display as per expectation. but how can I place <code>TeacherNames</code> along with that single review? I have put the <code>TeacherNames[$index]</code>, but it doesn't work.</p>
  
  <p><strong>Note 1:</strong> Number of elements in both the array(i.e. Reviews and TeacherNames) will be same.</p>
  
  <p><strong>Note 2:</strong> I don't want to change the structure of this JSON model, something like putting extra variable and placing both the parameters in one array.</p>
  
  <pre><code>&lt;div data-bind="foreach:viewModel"&gt;
      &lt;span data-bind="text: StudentName"&gt;&lt;/span&gt;
       &lt;ul data-bind="foreach:Reviews"&gt;
         &lt;li&gt;
           &lt;a href="#" data-bind="text:$data"&gt;Inbox &lt;/a&gt;
           &lt;span class="ui-li-count" data-bind="text:TeacherNames[$index]"&gt;123&lt;/span&gt;
         &lt;/li&gt;
       &lt;/ul&gt;
  &lt;/div&gt;   
  </code></pre>
  
  <p>Please check this <a href="http://jsfiddle.net/RCnVR/" rel="nofollow">Fiddle</a> .</p>