Passing ng-model in nested directives

Question

I want to pass my ng-model from the \'outer-directive\' to an \'inner-diretive\' (which is contained in the outer-directive template).

What is the correct way for doing

Answer 1

I think you need to pass the form in the directive and set the form dirty manually.

<directive directive-form="editForm" ></directive>

scope: {
 directiveForm:"="
 },
 link: function (scope, $elem, $attrs){
  scope.directiveForm.$setDirty(); 
 }

Answer 2

You can set up a bi-directional binding (see the documentation, section "Directive Definition Object") with the variable in ngModel attribute, as with any other directives:

<my-directive ng-model="foo"></my-directive>

myApp.directive('myDirective', function () {
    return {
        template: '<div><input type="text" ng-model="ngModel" /></div>',
        replace: true,
        scope: {
            ngModel : '=',
        },
    };
});

Fiddle