Pass Angular object property through variable?

Question

Controller:

$scope.item = {"name": "b", "code": 3}
$scope.foo = "name";

How to access {{item.name}} through 'foo'?

This doesn't work:

HTML:

{{item.{{foo}}}}

Answer 1

Use square brackets to access the value of variable as a key of object. You are nesting the angular expression {{}} within another which is incorrect to access the value of key of the object.

angular.module('myApp', []).controller('personCtrl', function($scope) {
   $scope.item = {"name": "b", "code": 3}
   $scope.foo = "name";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="personCtrl">

  <p>{{item[foo]}}</p>

</div>

Answer 2

Try this template HTML:

{{item[foo]}}