AngularJS how to bind maps

Question

AngularJS how to bind maps

Here is my HTML:

<div ng-app="angularApp">
    <div ng-controller="testCtrl">
        testKey = {{testKey}}<br />
        Test 1: <input type="text" ng-model="test.myKey" />{{test[testKey]}}<br />

        Test 2: <input type="text" ng-model="test[testKey]" />{{test[testKey]}}
    </div>
</div>

Here is the js:

angular.module('angularApp', []);

function testCtrl($scope)
{
    $scope.testKey = "myKey";
}

I setup and example here

Why does Test 1 work but Test 2 not work? Are "[" not allowed in the ng-model directive?

binding
controller
scope
angularjs

Answer 1

Here a working example. The problem is very simple, test.[testKey] isn't valid, you want test[testKey]. And you need to define test as an object on the controller because you cannot set a property of an undefined variable.