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.0rc4.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>ServerType:</b> {{settings.serverType}}</li>
        <li><b>ServerName:</b> {{settings.serverName}}</li>
    </ul>
    <hr/>
    Server Type (template): <input type="text" ng-model="settings.serverType"><br/>
    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>

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: {
            serverTypeModel: 'accessor',
            serverNameModel: 'bind'
        },
        template: '<div>Server Name (for {{serverTypeModel()}}): <input type="text" ng-model="serverNameModel"></div>'
    };
});

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