code snippet for prototyping a simple angular debug component

ng_debug.html

<!-- initialize ng-app ... -->
<!-- debug -->
<hr/>
<section id="debug" ng-controller="debugCtrl">

<style>
#debug {
	padding: 1em;
	background: #DDD;
}
#debug ul li{
	display: inline;
	padding-right: 1em;
}
#debug ul li{
	background: #AAA;
	padding: 0.2em;
}
#debug input, #debug button {
	border: 1px solid #AAA;
	background: #FFA;
}
</style>

<script>
app.controller("debugCtrl", function($scope) {

	$scope.selection = {};
	
	var colors = "white yellow red green blue".split(" ");
	$scope.selection.colors = colors;

	$scope.add_color = function () {
		$scope.selection.colors.push($scope.color);
	}

});
</script>

<ul>
	<li ng-repeat="x in selection.colors track by $index">
		<span style="color:{{x}};">{{x}}</span>
	</li>
</ul>
<input ng-model="color" />
<button ng-click="add_color()">Add</button>

<pre>{{selection | json}}</pre>

</section>
<hr/>
<!-- debug -->