angularjs - Parsing through a json file with multiple nested items Angular -

aioi have json file below, linted jsonlint.com. having problem identifying right angular dot down method firstname.

{{complaints.filenum}} 

will render: case1

{{complaints.aio[0].aio_id}}  

will render: 3

{{complaints.aio.crinvolved[0].firstname}} or     {{complaints.aio.crinvolved[0].firstname}} 

will render nothing. please advise on doing wrong.

{ "aio": [{     "allegations": [],     "crinvolved": {         "assoc_inc_off": [],         "firstname": "joe",         "middlename": null,         "lastname": "do",         "dateofbirth": null,         "hired_dt": null,         "race": null,         "rank": null,         "district": null,         "offduty": null,         "sex": null,         "ethnicity": null,         "officertype": null,         "oimonly": null,         "compid": null,         "ofcnum": 2,         "aio_id": null,         "badgeno": "p12345",         "department": null     },     "aio_id": 3,     "comp_id": 1,     "ofcnum": 2,     "link_type": null }], "comp_id": 1, "filenum": "case1", "received_dt": "2016-01-21t00:00:00", "croroute_dt": "2015-10-07t00:00:00" } 

made fiddle: https://jsfiddle.net/frishi/nbe9hc32/6/

this should it:

 {{foo.assoc_inc_off[0].crinvolved["firstname"]}}