title: Knockout JS foreach $root undefined
body: <p>I'm trying to create a radio group in Knockout JS, here is the template code</p>
  
  <pre><code>&lt;p&gt;Selected Plan &lt;div data-bind="text: selectedPlan"&gt;&lt;/div&gt;&lt;/p&gt;
  &lt;div data-bind="foreach: plans"&gt;
      &lt;label&gt;
          &lt;input type="radio" name="plan" data-bind="attr: {value: id}, checked: $root.selectedPlan"/&gt;
          &lt;span data-bind="html: title"&gt;&lt;/span&gt;
          &lt;div data-bind="text: desc"&gt;&lt;/div&gt;
      &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the component <code>selectePlan</code> and <code>plans</code> are registered as follows</p>
  
  <pre><code>this.plans = ko.observableArray([/* array of plans */]);
  this.selectedPlan = ko.observable('xxxxx');
  </code></pre>
  
  <p>I have verified that <code>xxxxx</code> is a valid entry in <code>this.plans</code>. Despite this an error is raised in the console</p>
  
  <blockquote>
    <p>knockout.js:3391 Uncaught TypeError: Unable to process binding
    "foreach: function(){return plans }" Message: Unable to process
    binding "checked: function(){return $root.selectedPlan }" Message:
    Cannot read property 'selectedPlan' of undefined</p>
  </blockquote>
  
  <p>It seems the <code>$root</code> keyword is <code>undefined</code> for some reason...</p>
  
  <p>EDIT:
  Structure of plans</p>
  
  <pre><code>[{
   id: 'xxxxx',
   desc: 'This is a great plan',
   title: '&lt;strong&gt;Save with great plan&lt;/strong&gt;',
  },
  ...
  ]
  </code></pre>