Directive Dual Bind

Testing to see how to build a directive that created UI elements that bind back to the parent model.

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc6.min.js"></script>
<p>Testing Directive Binding</p>
<hr/>
<div ng-app="interfaceSettings" ng-controller="TestDirective">
    <ul>
        <li><b>AngularVersion:</b> {{settings.angularVersion.full}}</li>
        <li><b>ServerName:</b> {{settings.serverName}}</li>
    </ul>
    <hr/>
    Server Name (template): <input type="text" ng-model="settings.serverName"><br/>
    <hr/>
    Using the directive:<br/>
    <ei-server-name contenteditable="true" server-name-model="settings.serverName"/> 

</div>

CSS

body {
    padding: 10px; 
    font-family: sans-serif; 
    font-size: 1.0em;
}
.small {font-size:x-small;}

JavaScript

var settingsModule = angular.module('interfaceSettings', []);
settingsModule.directive('eiServerName', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            serverNameModel: 'accessor'
        },
        link: function(scope, elem) {
            elem.html(scope.serverNameModel());
            
            // bind from ei-server -> parent
            elem.bind('keyup blur paste', function() {
                console.log('VALUE IN DIRECTIVE CHANGED -> changing parent value', elem.html() );
                scope.serverNameModel(elem.html);
            });

            // bind from parent -> ei-server
            scope.$watch(function() {
                return scope.serverNameModel()
            }, function(value) {
                console.log('VALUE IN PARENT CHANGED -> changing local value', value);
                elem.html(value);
            });
        }
    };
});

function TestDirective($scope) {
    $scope.settings = {
        angularVersion: angular.version,
        serverName: 'vaiism'
    };
}