Using AngularJS interpolation binding, `{{ }}`, with dot notation

Question

I would like to use the AngularJS interpolation binding with dot notation.

<div ng-repeat="item in items">
  <input type="checkbox" ng-model="form.city.{{item.region}}.enabled">
</div>

The ng-model gives me errors. What am I doing wrong?

Answer 1

The ng-model value is considered an angular expression , so there is no need to use braces.

ng-model="form.city[item.region].enabled" should work fine.

Answer 2

From the Docs:

Why mixing interpolation and expressions is bad practice:

• It increases the complexity of the markup
• There is no guarantee that it works for every directive, because interpolation itself is a directive. If another directive accesses attribute data before interpolation has run, it will get the raw interpolation markup and not data.
• It impacts performance, as interpolation adds another watcher to the scope.
• Since this is not recommended usage, we do not test for this, and changes to AngularJS core may break your code.

— AngularJS Developer Guide - mixing interpolation and expressions