Angular+JQ+Bootstrap

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-controller="MyCtrl">
    
    <div ng-repeat=" name in widgets">
        {{name}}
        {{values[]}}
        <ng-switch on="values[name].type">
            
            <input ng-switch-when="bool" type="checkbox" ng-model="values[name].value" /> 
            <input ng-switch-when="string" type="line" ng-model="values[name].value"/> 

        </ng-switch>
        
    </div>
    
    <button ng-click="doSomeRequest()">DoSomething</button>
    
    <hr>
    
    {{ values | json }}
    
</div>

CSS

.square {
    height: 100px;
    width: 100px;
    border: 2px solid black;
}
.circle {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 2px solid black;
}

JavaScript

var app=angular.module('myApp', []);
        

function MyCtrl($scope) {
    $scope.values = {
        foo : { type:"bool", value: false },
        bar : { type:"string", value: "hello world" }, 
        baz : { type:"bool", value: true },   
        abc : { type:"string", value: "hello aasdf" },         
    }
        
    $scope.widgets = [ 'foo', 'bar', 'baz', 'abc' ];

    $scope.update = function(newValues)
    {
      for (key in newValues)
      {
        $scope.values[key].value = newValues[key];     
      }          
    }
        
    $scope.doSomeRequest = function()
    {
        values = {"bar":"blah blah", "baz":"false"}
        $scope.update (values);
    }
}