angularjs : pass argument to dynamic directive

Question:

I have this simple directive:

app.directive('string', function () {
    return{
        template: '<input id="{{field.name}}" name="{{field.name}}" type="text" value="{{field.value}}"/>',
        restrict: 'E',
    };
});

That I'm creating in a controller:

for(var i=0;i<$scope.steps;i++){
   var step = $scope.steps[i];
   var element = document.createElement(step.type);

   var compiled = $compile(element)($scope);
   $(document.body).append(compiled);
}

this outputs a textfield without a value. How can I give my directive the 'step' variable and print it out in the text field as step.value?

You should simply use ng-repeat for this

<string ng-repeat='field in steps'></string>

Update: Doing what ng-repeat does

for(var i=0;i<$scope.steps;i++){
   var childScope=$scope.$new();
   childScope.field=$scope.steps[i];
   var element = document.createElement(field.type);

   var compiled = $compile(element)(childScope);
   $(document.body).append(compiled);
}

Related:

Angular $http and Fusion Tables in IE9

UI-Router : Prevent access to parent state

Socket.IO message doesn't update Angular variable

AngularJS & Bootstrap Modal - loading template outside controller

Can't get angular.js to loop through array and post to html

navbar disappears but no dropdown

How to use a service with Http request in Angular JS

How can this be undefined in the constructor of an Angular config class?

Error: [$injector:unpr] Unknown provider: RestangularProvider <- Restangular <- ctrlAG

AngularJS line break at points after a maximum length was reached

Angular-strap data-trigger='focus' not working

$http.get returns actual php script instead of running it (yeoman, grunt)

How to select multiple selected value from select option

Using ng-click to toggle between two functions

angular.js - simplest way to handle click inside controller

Passing params to an angular service from a controller?

Merge and sum values and put them in an array

AngularJS - binding/linking two directives together

AngularJS: Adding ng-click within element.append

HTML elements in Angular bindings expression

Getting CROS Error even after adding header in node.js for Angular js

validation of AngularJS direcrives

calling one controller from another controller

Save to 3 firebase locations with a slow internet connection

Angularjs $watchCollection on $rootScope not triggered when values updated from directive

Improve slow angular directive

AngularJS dynamically call function

Getting generic anchor text on click with angularJS/jQuery returns empty string

Angular ng-repeat cache (avoid re-rendering on state change)

How to define style to layout-margin flex variants, using Angular Material

Can't save json data to variable (or cache) with angularjs $http.get

AngularJS, Animate on change: directive $watch not called

Angular controller error: 'Controller is not a function, got undefined'

How to add class on ng-click?

REST API with token based authentication

AngularJS factory dependencies

$scope variable does not update within $interval function

Create angular page in Django to consume data from JSON

Iframe does not show scrollbar

success and error function in the controller for a service

function is undefined if no module is declared in Angular

remove char from string with angular

Is there a way to fire an event every time an ajax call in made in AngularJS?

Pre-Select of an option in a select not working

How do I add a class on ng-click from layout?

Angular submit not called when required fields not filled