AngularJS Directives - Start

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc5.min.js"></script>
<body>
    <div class="boundingBox">
       <div class="circle" style="background-color:#900; left:50px; top:50px;"></div>
       <div class="circle" style="background-color:#060; left:110px; top:70px;"></div>
       <div class="circle" style="background-color:#006; left:170px; top:90px;"></div>
       <div class="circle" style="background-color:#963; left:230px; top:110px;"></div>
    </div>
    
    <div class="line"></div>
</body>

CSS

.boundingBox {
    width: 600px;
    height: 600px;
    background-color: #333333;
    margin:20px;
}


.circle {
    display:block;
    position:absolute;
    height: 20px;
    width: 20px;
    background-color: #999;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

.line {
    border: 3px solid red;
    display: table;
    width: 100%;
}

.box {
    display:block;
    position:absolute;
    height: 20px;
    width: 20px;

}

#controls {
    position: absolute;
    top: 620px;
}