AngularJS ng-model converts object to string

I have the following in my HTML file:

    <td style="width: 200px;">
        <span ng-repeat="list in listGroups">
            <label for="{{ list.description }}" />{{ list.description }}</label>
            <input ng-model="$parent.listGroup" id="listGroup-{{ list.value }}"  name="listGroups" value="{{ list }}" type="radio" />
        </span>
   </td>

The listGroups contains:

[
    {
        "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"
    }
]

When I click a radio button the listGroup (set in ng-model) becomes, for example:

{"description":"New by Genre","group":"genre","type":"new"}

When I look at listgroup with typeof $scope.listGroup, I see that it is a string now!

As such, I can't access it's properties in the other bindings in the rest of the HTML page.

In this case, I want ng-show="listGroup.group == 'genre'"

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?

Thanks all

Dave

The problem is that the input's value attribute only accepts strings, not objects (check here). When you do this: value="{{ list }}", you are basically doing input.value = list.toString().

One possible workaround is to use the $index of the ng-repeat directive. Example: http://jsfiddle.net/bmleite/cKttd/

Why do you want to have an object as an ng-model? That is what's causing your listGroup variable to become a string, since ng-model only works with strings. If you have a complex object that you want to use with ng-model, you should create a directive and implement a parser and a formatter, like this: How to do two-way filtering in angular.js?