How do I dynamically name a model of a directive scope with 2 way binding?

Question

I'm trying to use a ng-repeat to dynamically pass in an object value to a directive, like so:

<td ng-repeat="attr in demographicAttrs">
  <yes-no name="{{ attr }}-{{ $index }}"
    model="ambassador.demographic.{{ attr }}"
    update="calcScore(ambassador)"></yes-no>
</td>

where the directive is defined as

function (
  $rootScope
) {
  "use strict";

  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'templates/yesNo.html',
    scope: {
      "name": "@",
      "model": "=",
      "update": "&"
    },
    link: function(scope, element, attrs) {
      scope.$watch('model', function(value) {
        scope.update();
      });
    }
  };
};

So I'm trying to dynamically generate the model to be watched in ambassador.demographic.{{ attr }}, but the = 2 way binding for directives, doesn't like the value being generated that way.

I get this error: https://docs.angularjs.org/error/$parse/syntax?p0=%7B&p1=is%20an%20unexpected%20token&p2=24&p3=ambassador.demographic.%7B%7B%20attr%20%7D%7D&p4=%7B%7B%20attr%20%7D%7D

How would I do this?

Updates

• I've also tried doing it with ambassador.demographic[{{ attr }}], but that doesn't work either (close, but need to remove {{ }}, as per https://stackoverflow.com/a/23405825/111884)
• I found this Setting dynamic scope variables in AngularJs - scope.<some_string>, but $parse doesn't seem to work in html

Answer 1

Change the model expression to use the javascript bracket notation:

model='ambassador.demographic[attr]'

Fiddle