AngularJS - cannot reference $index inside ng-model using a directive

Question

I am currently facing an issue whereby I would like to generate a dynamic number of input forms and also name them dynamically (as defined by a JSON) so that I can reference them separately.

For example, if my JSON object had three items in it, I would generate three input boxes with ng-model="1" , ng-model="2" and ng-model="3" respectively. In real life the ID's will come from the JSON itself.

I'm currently using ng-repeat to generate the forms in a table;

<tr ng-repeat="x in names track by $index">
<td>{{ $index }}</td> <!-- this outputs fine  -->
<td>{{ x.Description }}</td>
<td>{{ x.Metric }}</td>
</tr>

And using a directive & the $compile function to dynamically generate an input form with a unique ng-model name.

app.directive("outDynamic", function($compile){
return{
    link: function(scope, element, attrs){
        var template = "<input type='number' ng-model='" + scope.ray[attrs.element1] + "'>";
        var linkFn = $compile(template);
        var content = linkFn(scope);
        element.append(content);
    }
} });

However: none of the following works (when nested in the ng-repeat )

    <!-- None of these work -->
<td out-dynamic element1=$index></td>
<td out-dynamic element1="$index"></td>
<td> <input type='number' ng-model="array[$index]"> </td>
<td> <input type='number' ng-model="array['$index']"> </td>

Summary of issue;

Every time I try and reference the $index tracker, I get an undefined error in my directive code.

Answer 1

You should use {{}} to assign $index value for attribute. so use

element1={{$index}} instead of element1=$index

<tr ng-repeat="x in names track by $index">
     <td out-dynamic element1={{$index}}></td>
     <td out-dynamic element1="{{$index}}"></td>
</tr>

I guess your scope.arr is perfect.

PLUNKER DEMO