AngularJS - ngModel in nested directives

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

by Oakley Hall

HTML

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

JavaScript

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

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

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