mhevery/index.html

## index.html
<!doctype html>
<html xmlns:ng="http://angularjs.org">
       <head>
               <script type="text/javascript" src="http://code.angularjs.org/angular-0.9.8.js" ng:autobind></script>
               <script type="text/javascript">
function Controller() {
       var self = this;
       this.sizes = [{w:320, h:200},{w:640, h:480},{w:800, h:600}];
       this.rectangles = [
         {name:"alfa", size:{w:640, h:480}},
         {name:"beta", size:{w:800, h:600}}];

       this.setByJson = function (prop, json) {
               angular.copy(angular.fromJson(json), prop);
       }

       this.selectRectangle = function(rect) {
               self.selectedRectangle = rect;
       }

       this.selectedRectangle = this.rectangles[0];
}
               </script>
       </head>
       <body ng:controller="Controller">
               <ul>
                       <li ng:repeat="rect in rectangles"><a href ng:click="selectRectangle(rect)">{{rect.name}}</a></li>
               </ul>
               <div id="editRectanglePanel" style="border: 1px solid black">
                       <h1>{{selectedRectangle.name}} ({{selectedRectangle.size.w}} x {{selectedRectangle.size.h}})</h1>
                       Size:
                       <select name="selectedRectangle" ng:format="json">
                               <option ng:repeat="size in sizes"
                                       value="{{size}}">{{size.w}} x {{size.h}}</option>
                       </select>
               </div>
               <pre>rectangles={{rectangles}}</pre>
               <pre>selectedRectangle={{selectedRectangle}}</pre>
       </body>
</html>
	<!doctype html>
	<html xmlns:ng="http://angularjs.org">
	<head>
	<script type="text/javascript" src="http://code.angularjs.org/angular-0.9.8.js" ng:autobind></script>
	<script type="text/javascript">
	function Controller() {
	var self = this;
	this.sizes = [{w:320, h:200},{w:640, h:480},{w:800, h:600}];
	this.rectangles = [
	{name:"alfa", size:{w:640, h:480}},
	{name:"beta", size:{w:800, h:600}}];

	this.setByJson = function (prop, json) {
	angular.copy(angular.fromJson(json), prop);
	}

	this.selectRectangle = function(rect) {
	self.selectedRectangle = rect;
	}

	this.selectedRectangle = this.rectangles[0];
	}
	</script>
	</head>
	<body ng:controller="Controller">
	<ul>
	<li ng:repeat="rect in rectangles"><a href ng:click="selectRectangle(rect)">{{rect.name}}</a></li>
	</ul>
	<div id="editRectanglePanel" style="border: 1px solid black">
	<h1>{{selectedRectangle.name}} ({{selectedRectangle.size.w}} x {{selectedRectangle.size.h}})</h1>
	Size:
	<select name="selectedRectangle" ng:format="json">
	<option ng:repeat="size in sizes"
	value="{{size}}">{{size.w}} x {{size.h}}</option>
	</select>
	</div>
	<pre>rectangles={{rectangles}}</pre>
	<pre>selectedRectangle={{selectedRectangle}}</pre>
	</body>
	</html>