AngularJS - ngModel in nested directives

Simple example for StackOverflow (http://stackoverflow.com/questions/19429958/passing-ng-model-in-nested-directives)

by Amaury Dalla Monta

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl">
    {{foo}}<br />
    <my-directive ng-model="foo"></my-directive>
</div>

JavaScript

var myApp = angular.module('MyApp', []);

myApp.controller('MyCtrl', function ($scope) {
    $scope.foo = "I'm foo!";
});

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