AngularJS - Inherit ngModel in custom directive

Question

I have a custom directive like this:

myText.html:

<div>
<label>{{label}}</label>
<input type="text" class="form-control" >
</div>

Javascript:

app.directive("myText", function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: "shared/form/myText.html",
        scope : {
            label : "@",
        }
    };
});

I just want to wrap an input and handle a label as an attribute.

In my view i use the directive this way:

<my-text label="Name" ng-model="person.firstname"></my-text>

The problem is that ng-model is not binding the model to my input.

What is the correct way to achieve this result? Thanks

Answer 1

Put ng-model on the input and bind it to the isolate scope.

<my-text label=Name model=person.firstname></my-text>

<input type="text" class="form-control" ng-model=model>

return {
    restrict: 'E',
    replace: true,
    templateUrl: "shared/form/myText.html",
    scope : {
        label : "@",
        model: "=",
    }
};