Angularjs: nested ng-repeat with key reference from one to the another

Question

I want reference the key value from one repeat value to the other. Its a bit hard to explain but here is the jsfiddle http://jsfiddle.net/u75us/163/

I want to get the f_column value from key_var array and get that same keyvalue from value_var array.

The jsfiddle code will actually give error because its not valid {{val.{{key.f_column}}}} in angularjs.. Thats only pseudocode that I want to achieve.

How I can achieve this?

<ul ng:controller="Cntl">
<li ng:repeat="key in key_var">{{key.f_column}}
    <li ng:repeat="val in value_var">{{val.{{key.f_column}}}</li>
</li>

function Cntl() {
this.value_var = [ 
    {"v_a":"a" , "column1" : "v1" },
    {"v_a":"a" , "column2" : "v2" } 
]

this.key_var =  [
     {"f_column":"column2"},
    {"f_column":"column1"}
];

}

Answer 1

To reference a property of an object using a variable use the square bracket notation. This goes for javascript in general and for angular as well.

Eg:

{{val[key.f_column]}}

demo: http://jsbin.com/OsuKUQo/1/

Answer 2

SyntaxError: Unexpected token ; ??

{{val.{{key.f_column}}} 

change

{{ val.key.f_column }}

Answer 3

As Yoshi said above, you can access a JavaScript property using [] notation.

In your example another fundamental references were missing: $scope in your controller and ng-app in your html. Without them AngularJS cannot bind your app to your html; to know what value_var and key_var are all about they must be bound to $scope .

http://jsfiddle.net/U3pVM/1820/