javascript - How to get checkboxes to initialize based on model? -

i writing first non-tutorial angular.js web app. using 2 smart-tables , checklist-model. here first 1 uses st-safe-src of all_types array of json objects ...

[   {     "_id": "56417a9603aba26400fcdb6a",     "type": "beer",     "__v": 0   },   {     "_id": "56456140cb5c3e8f004f4c49",     "type": "skiing",     "__v": 0   },   ... 

here html table use display data:

  <table st-table="displayedcollection" st-safe-src="all_types" class="table table-striped">       <thead>           <tr>               <th st-sort="type">types</th>           </tr>       </thead>       <tbody>           <tr ng-repeat="x in displayedcollection">               <td><input type="checkbox" checklist-model="vendor.types" checklist-value="x.type">{{x.type}}</td>           </tr>           <tr><td>id ({{curid}}) {{vendor.types}}</td></tr>       </tbody>       <tfoot>           <tr>               <td colspan="5" class="text-center">                   <div st-pagination="" st-items-by-page="itemsbypage" st-displayed-pages="7"></div>               </td>           </tr>       </tfoot>   </table> 

this table looks when load data it. checkboxes checked match data model.

but when try same thing in second smart table more complete json objects ...

[   {     "_id": "569f047dd90a7874025b344e",     "product_title": "plugs",     "product_img_001": "p001.jpg",     "product_img_002": "p002.jpg",     "product_vid_001": "bp.mov",     "__v": 0,     "product_sizes": [       "large",       "med.",       "small",       "10.5"     ],     "product_types": [       "running shoe"     ]   },   {     "_id": "569f3958b108a7d70201b89a",     "product_title": "back scratcher",     "product_img_001": "http://itchy.png",     "product_img_002": "http://relief-at-last.png",     "product_vid_001": "my-itch",     "__v": 0,     "product_sizes": [       "large"     ],     "product_types": [       "rocks"     ]   } ] 

here's html using display data in smart table:

  <table st-table="prodcollection" st-safe-src="all_products" class="table table-striped">       <thead>           <tr>               <th st-sort="type">products</th>           </tr>       </thead>       <tbody>           <tr ng-repeat="x in prodcollection">               <td><input type="checkbox" checklist-model="vendor.products" checklist-value="x">{{x.product_title}}</td>           </tr>           <tr><td>{{vendor.products}}</td></tr>       </tbody>       <tfoot>           <tr>               <td colspan="5" class="text-center">                   <div st-pagination="" st-items-by-page="itemsbypage" st-displayed-pages="7"></div>               </td>           </tr>       </tfoot>   </table> 

this table looks when load data it:

i had hoped checkbox checked, not checked. if make change ...

<td><input type="checkbox" checklist-model="vendor.products" checklist-value="x.product_title">{{x.product_title}}</td> 

... correct checkboxes checked product's title posted. need checkboxs display checked , able post whole product data?

i have added plunker example: http://plnkr.co/edit/apcebv5e9pb5np9iay2l

you can use checklist-value id instead of object section on doc array of objects (pick id)

<input type="checkbox" checklist-model="vendor.products" checklist-value="x._id"> 

or if need use object selected products (checklist-value="x") need use checklist-comparator because in plunker selected array , full product list don't have same references. comparator must match equal objects _id. try this

  <input type="checkbox" checklist-comparator="._id" checklist-model="vendor.products" checklist-value="prod" />