title: AngularJS ng-model converts object to string
body: <p>I have the following in my HTML file:</p>
  
  <pre><code>    &lt;td style="width: 200px;"&gt;
          &lt;span ng-repeat="list in listGroups"&gt;
              &lt;label for="{{ list.description }}" /&gt;{{ list.description }}&lt;/label&gt;
              &lt;input ng-model="$parent.listGroup" id="listGroup-{{ list.value }}"  name="listGroups" value="{{ list }}" type="radio" /&gt;
          &lt;/span&gt;
     &lt;/td&gt;
  </code></pre>
  
  <p>The listGroups contains:</p>
  
  <pre><code>[
      {
          "description": "New by Territory",
          "group": "product",
          "type": "new"
      },
      {
          "description": "New by Genre",
          "group": "genre",
          "type": "new"
      },
      {
          "description": "Charts by Territory",
          "group": "product",
          "type": "chart"
      },
      {
          "description": "Charts by Genre",
          "group": "genre",
          "type": "chart"
      }
  ]
  </code></pre>
  
  <p>When I click a radio button the listGroup (set in ng-model) becomes, for example:</p>
  
  <pre><code>{"description":"New by Genre","group":"genre","type":"new"}
  </code></pre>
  
  <p>When I look at listgroup with <code>typeof $scope.listGroup</code>, I see that it is a string now!</p>
  
  <p>As such, I can't access it's properties in the other bindings in the rest of the HTML page.</p>
  
  <p>In this case, I want <code>ng-show="listGroup.group == 'genre'"</code></p>
  
  <p>What's happening here and, more importantly, how do I make it do what I want it to do, which is keep the object as an object?</p>
  
  <p>Thanks all</p>
  
  <p>Dave</p>