JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<div ng-app="test">
    <div ng-controller="MyCtrl">
        <span ng-repeat="widget in chart.object" class="my-object" ng-class="{'selected-object': $index == selectedObjectIndex}" ng-click="selectObject($index)">
            <label>{{widget.label}}</label>
            <span id="obj-js" class="obj" style="height:{{widget.amt}}px"></span>
        </span>
    <button ng-click="addObject()" class="add">ADD</button>
    
    <input type="text" class="builder-input" ng-disabled="selectedObjectIndex == null" ng-model="chart.object[selectedObjectIndex]['label']"/>
    <input type="range" class="slider" ng-disabled="selectedObjectIndex == null" ng-model="chart.object[selectedObjectIndex]['amt']"/>
    </div>
</div>

CSS

.my-object {
    border: 2px solid #000;
    width: 200px;
    padding: 5px;
    display: block;
    margin: 0 0 5px 0;
}

.my-object.selected-object {
    border: 2px solid #ddd;    
}

.obj {
    border: 1px solid #999;
    display: block;
    width: 200px;
}
}

JavaScript

angular.module('test', []).controller('MyCtrl', function($scope) {
    
    $scope.chart = {
        object: []   
    };
    
    $scope.selectedObjectIndex = null;
    
    $scope.addObject = function() {
        $scope.chart.object.push({
            label: 'New object',
            amt: '10'
        });
    };
    
    $scope.selectObject = function($index) {
        $scope.selectedObjectIndex = $index;
    }
    
});