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.0rc8.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 
        server-type-model="{{settings.serverType}}" 
        server-name-model="settings.serverName"/>

</div>

JavaScript

var settingsModule = angular.module('interfaceSettings', []);
settingsModule.directive('eiServerName', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            serverNameModel: 'accessor'
        },
        template: '<div>Server Name: <input type="text" ng-model="localModel"></div>',
        link: function(scope) {
            scope.localModel = scope.serverNameModel();
            
            // bind from ei-server -> parent
            scope.$watch('localModel', function(value) {
                scope.serverNameModel(value);
            });
            
            // bind from parent -> ei-server
            scope.$watch(function() {return scope.serverNameModel()}, function(value) {
                scope.localModel = value;
                });
        }
    };
});

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