Nested ng-binding with angularJS

Question

I have some html that has data binded that needs to be dynamic, here is an example of the type of thing I'm looking for.

Basically I want to be able to get the user.female.firstName, or user.male.firstName but I wont know what the gender is until I run another function.

<h1>{{user.{{gender}}.firstName}}</h1>

Also how would gender look?

$scope.gender = 'female';
$scope.gender = female;

is something like this even possible?

Answer 1

For the HTML it would suffice:

<h1>{{user[gender].firstName}}</h1>

The JavaScript:

$scope.gender = 'female';

Here's a JsFiddle:

http://jsfiddle.net/zftLR