Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">{{data|json}}
<div ng-controller="DataController">
<select ng-model="data.selected" ng-options="p.proxyType for p in proxyOptions" fix-select="proxyOptions"></select>
<!-- use ng-switch on data.selected, and provide type specific fields -->
</div>
</div>
JavaScript
var myApp = angular.module('myApp', []);
myApp.directive('fixSelect', function () {
return {
require: "ngModel",
link: function ($scope, $element, $attrs, controller) {
//allows you to access sub-properties with dot notation (data.subproperty)
function getDescendantProp(obj, desc) {
var arr = desc.split(".");
while (arr.length && (obj = obj[arr.shift()])) {}
return obj;
}
var optionsProperty = $attrs.fixSelect;
//if any of the options match the value, replace the ngModel value
function setValueIfSame() {
var options = getDescendantProp($scope, optionsProperty);
angular.forEach(options, function (option) {
if (angular.equals(option, controller.$viewValue)) {
controller.$setViewValue(option);
}
});
}
//watch when the options change
$scope.$watch($attrs.fixSelect, setValueIfSame);
//watch when ng-model changes
$scope.$watch(function () {
return controller.$viewValue;
}, setValueIfSame);
}
};
});
function DataController($scope) {
$scope.proxyOptions = [{
proxyType: 'None'
}, {
proxyType: 'Manual'
}, {
proxyType: 'Automatic'
}];
}
function MyCtrl($scope) {
$scope.data = {};
//now this works (with the directive)
$scope.data.selected = {
proxyType: 'Manual'
};
}