JSFiddle - React, Tailwind, and code Playground

by Bretto

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc6.min.js"></script>
<!doctype html>
<html ng-app="Model">
<head>
    <script src="http://code.angularjs.org/angular-1.0.0rc6.min.js"></script>
    <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
</head>
<body>
<div class="bgDisplay" ng-controller="AlbumCtrl">
    <div ng-style="myprop()"> {{master.getCombined()}}</div>
 
</div>
<div ng-controller="EditCtrl">
    <form class="form-horizontal">
        <fieldset>
        <div class="control-group">
            <label class="control-label">Width : </label>
             <input type="text" class="controls" ng-model="master.width">
        </div>
        </fieldset>                
        <fieldset>
        <div class="control-group">
            <label class="control-label">Height : </label>
             <input type="text" class="controls" ng-model="master.height">
        </div>
        </fieldset>
    </form>
</div>
    <div ng-controller="AnoCtrl">
        <button ng-click="toggle()" class="btn btn-primary">Hide</button>
    </div>
</body>
</html>

CSS

.bgDisplay{
   position:relative;
    display: block;
    width: auto; 
    height: 300px; 
    background-color: #CCC; 
}

JavaScript

angular.module('Model', []).factory('SizeModel', function() {
    return {
        width: 200,
        height: 100,
        display: "block",
        getCombined: function() {
            return parseInt(this.width,10) + parseInt(this.height,10);
        }
    };
});

function AlbumCtrl($scope, SizeModel) {
    $scope.master = SizeModel;
    $scope.$watch("master", function() {
        $scope.myprop = function() {
            return {
                display: $scope.master.display,
                backgroundColor: "#333",
                width: $scope.master.width + 'px',
                height: $scope.master.height + 'px',
                color: "#FFF"
            };
        };
    });

}

function AnoCtrl($scope, SizeModel) {
    $scope.master = SizeModel;

    $scope.toggle = function() {
        $scope.master.display = "none";
    };
}

function EditCtrl($scope, SizeModel) {
    $scope.master = SizeModel;
}