Replace ng-model value with the value of scope attribute into “new” scope directive

Question

I want to set the value of ng-model in my input box to the value of scope.modelName into the directive:

<input ng-model="{{modelName}}">

But that is not legal and generates an error, what is the best expression there to do that ?

The final HTML result must be:

<input ng-model="username">

The case here is special because the scope is "renewed" into the directive and that input is located inside the directive:

app.directive("textbox", function() {
return {
    restrict: 'AEC',
    replace: false,
    scope: true,
    templateUrl : "directives/textbox.html",
    link: function (scope,element, attr) {
        scope.modelName = attr.name;
    }
  };
});

That directive should be used as following:

<textbox name="username"></textbox>

In the normal cases, the following example is working:

<input ng-model="modelName">

But when i use that with my case it generates the same without any change to the ng-model value !

Answer 1

I think you're looking for:

<input ng-model="modelName">

The handlebars aren't needed

Answer 2

Update from

<input ng-model="{{modelName}}">

to

<input ng-model="modelName">

For reference - ng-model

Answer 3

I assume output that you are looking for should be equivalent of <input value="username"> and not <input ng-model="username"> (as stated in your question).

To resolve your problem, you should make use of <input ng-model="modelName"> . There is no need of curly brackets.