AngularJS - Three dependent selects - only the first two populate

Question

I am working with Express, Angular, and Jade. The relevant piece of the application allows the user to select an organization, board, and list from their Trello account. The three items form a hierarchy: Organizations contain boards, and boards contain lists.

So in my jade partial, I have the following:

select(ng-model='userData.apps.trello.organization', ng-options='orgId as orgDetails.name for (orgId, orgDetails) in orgsandboards')
select(ng-model='userData.apps.trello.board', ng-options='boardId as boardDetails.name for (boardId, boardDetails) in orgsandboards[userData.apps.trello.organization]["boards"]')
select(ng-model='userData.apps.trello.list', ng-options='listId as listDetails.name for (listId, listDetails) in orgsandboards[userData.apps.trello.organization][userData.apps.trello.board]["lists"]')

Syntax for the above, by the way, came from this helpful answer.

Anyhow, the data structure - modeled on the answer above - looks like this:

orgsandboards: {
    orgid1: {
        name: "organization 1",
        boards: {
            boardid1: {
                name: "name of the first board",
                lists: {
                    listid1: {
                        name: "name of list 1"
                    },
                    listid2: {
                        name: "name of list 2"
                    }
                }
            },
            boardid2: {
                name: "name of the second board",
                lists: {
                    listid3: {
                        name: "name of list 3"
                    },
                    listid4: {
                        name: "name of list 4"
                    }
                }                
            }
        }
    },
    orgid2: {.. and so on ..}
}

The first two selects work great. If I change the organization, the list of potential boards also changes. However, the third select - lists - never updates. I have verified that the data is present and available.

I've looked through other questions and answers, including this and this. As happens so often here, none seems to offer the answer I seek.

Thanks.

Answer 1

Looks like a case of Angular's forgiving nature masking an error. The third list's ng-options needs to end in:

in orgsandboards[userData.apps.trello.organization]["boards"][userData.apps.trello.board]["lists"]

notice the ["boards"] part.

The way you currently have it, you're referencing a key in in orgsandboards[userData.apps.trello.organization] that doesn't exist, but Angular doesn't usually throw errors in those circumstances--it just fails silently.