user2794782 user2794782 - 1 year ago 171
AngularJS Question

Passing ng-model in nested directives

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 it?

HTML code:

<outer-directive ng-model="prop" />

and directive code:

angular.module('app', []).directive('outerDirective', function(){
return {
template: '<inner-directive ng-model="prop" />',
link: function() { ... }

Answer Source

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 : '=',


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download