retrieving object properties from angularjs factory

Question

I am completely stumped on this one. Everything's working fine (or fine enough for now) and all I need is to get the data back out of the factory in a non-json format. I've got a semi-working plunker with all the details.

Basically, the first page (under the Ctrl controller) is where a user can check a bunch of boxes. There's also an ng-switch between sets of options (the real things are much, much larger lists than these), so the checkboxFactory maintains the user's choices. When the user goes to the next page (or "next page" in the plunker because faking it), they can see what they chose. Those choices will then get wrapped up in a json post back to the server. I need to show the user-friendly name, but also have the id# of the choice, for the server.

If I put value="{{item.name}}" in the original checkbox ng-repeat, everything is fine. Except for the fact that then I have a factory of names, and not the server-required ids. Doing a second array in the factory (one for selected names, one for the corresponding selected ids) seems like overkill, when theoretically I could just add each selection as an object, and extract the properties as needed on the second page.

In reality, it's not working. Here's what I get if I echo the factory, after selections are made:

[ "{\"id\":1,\"name\":\"Firstplace\"}", "{\"id\":2,\"name\":\"Second place\"}" ]

...and I'm not sure, but those backslashes seem to be turning every selection into strings, because there are quotes just inside the square brackets. I've tried editing line 54 in the script, but I get errors. It doesn't like this:

if (checked && index == -1) {
    if (setup) elem.prop('checked', false);
    else scope.list.push({
        id:"scope.value.id",
        name:"scope.value.name"
    });

On the html side, it doesn't like any of the variations I've tried in the ng-repeat, either. It seems like the source of all nightmares is that pushing is creating deformed json. I've tried all of these the second page/output:

{{item}}
{{item.name}}
{{item.item.name}}

The only one that works is {{item}} and unsurprisingly it's pretty ugly. Has anyone run into this before, and have any hints on how to fix this? Many thanks in advance.

Answer 1

using @ will turn your object into a string, you should just use a reference to your item object instead and use =.

Change {{item}} to just item as a reference:

<input type="checkbox" name="group1" value="item" ng-model="isChecked" checkbox-list='checkedCity' />

In directive use =:

scope: {
  list: '=checkboxList',
  value: '='
},

see updated plunker