title: Table row number when binding knockout foreach
body: <p>I have a table with headers(#,User name,User surname) and is doing a knockout foreach loop to add the rows when the user select the user name from a checkbox list. Here is my <a href="http://jsfiddle.net/JanGous/qpkYd/">Fiddle.</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div&gt;
      &lt;table class="table table-bordered"&gt;
         &lt;thead&gt;
             &lt;th&gt;#&lt;/th&gt;
             &lt;th&gt;User Name&lt;/th&gt;
             &lt;th&gt;User Surname&lt;/th&gt;
         &lt;/thead&gt;
         &lt;tbody data-bind="foreach: users"&gt;
             &lt;tr data-bind="if: userselected"&gt;
                 &lt;!-- The table row number --&gt;
                 &lt;td data-bind="text: $index() + 1"&gt;&lt;/td&gt;
                 &lt;td data-bind="text: username"&gt;&lt;/td&gt;
                 &lt;td data-bind="text: usersurname"&gt;&lt;/td&gt;
             &lt;/tr&gt;
         &lt;/tbody&gt;
     &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var myViewModel = {
       users: ko.observableArray([{
           username: 'Name 1',
           usersurname: 'Surname 1',
           userselected: ko.observable(false)
       }, {
           username: 'Name 2',
           usersurname: 'Surname 2',
           userselected: ko.observable(false)
       }, {
           username: 'Name 3',
           usersurname: 'Surname 3',
           userselected: ko.observable(false)
       }])
   };
  
   $(document).ready(function () {
       //Bind View model
       ko.applyBindings(myViewModel);
   });
  </code></pre>
  
  <p>The problem comes in when the user selects users 1 and 3 the $index() + 1 doesn't work for the row number.</p>
  
  <p>I need a way to set the row number dynamically.</p>
  
  <p>Thanks in advance.</p>