Two-way binding without isolate scope

This fiddle shows how `$eval` can be used to get automated two-way data-binding in an AngularJS directive without requiring an isolate scope.

by Michiel Helvensteijn

HTML

<div ng-controller="outerController">
    {{caption1}}: <input type="text" ng-model="outerModel.val"></input><br />
    <my-directive inner-model="outerModel"></my-directive>
</div>

JavaScript

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

app.controller('outerController', function ($scope) {
    $scope.outerModel = { val: '' };
    $scope.caption1 = "First";
    $scope.caption2 = "Second";
});

app.directive('myDirective', function($compile) {
    return {
        restrict: 'E',
        scope: true,
        template: '{{caption2}}: <input type="text" ng-model="innerModel.val"></input>',
        link: function(scope, element, attr) {
            // This code is enough to get two-way databinding.
            // It's using `scope.$parent.$eval` rather than
            // `scope.$eval` to hide inner fields from the outside:
            scope.innerModel = scope.$parent.$eval(attr.innerModel);            
        }
    };
});