dynamically setting the ng-model in a directive

Question

I have the following directive template

<section ng-controller="EntityController">
<h1>{{entityName}}</h1>

<div ng-repeat="(key,value) in properties">
    <div>
      <label for="{{key}}">{{key}}</label>
    </div>

    <div>
          <input id="{{key}}" type="text" class="form-control focus" 
                name="{{key}}" placeholder="{{key}}" autocomplete="off" 
                required ng-model="newEntity.{{key}}">
    </div>
</div>

</section>

and here's the directive that's attached to the controller

.directive('entityForm', function () {
    return {
      restrict: 'E',
      scope: {
        modelName: '=entityForm'
      },
      templateUrl: 'views/league/create-entity.directive-form.view.html'
    };
  });

The main question I have is that each of the {{key}} bindings in the template resolve to the correct value EXCEPT for the ng-model... I've read in a number of places that you can't use expressions to create the name for the ng-model but others appear to have it working in another fashion none the less?

Also if you look I'm creating an isolated scope in the directive options yet the 'properties' object is set in the scope in the controller? How is this possible?

Any help greatly appreciated this has stumped for a few days now.

Thanks, Mark.

Answer 1

I was able get this working following the advice provided by hgcrpd in his answer here AngularJS - Modular forms with directives

Basically I created the ng-model using a link function that generated the html for the template dynamically within the directive's logic. Also I had to initialize the object that would be submitted within the controller or else Angular wouldn't know about it and the info wasn't being posted.

Thanks, Mark.