AngularJS Directives - Dynamic

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc5.min.js"></script>
<body>

    <div ng-app="animateApp" ng-controller="AnimateCtrl">

            <div class="boundingBox">

               <div class="circle"
                    ng-repeat="shape in cirlce"
                    ng-style="{ 'backgroundColor':shape.color, 'left':shape.x+'px', 'top':shape.y+'px' }"
                    />

            </div>

    </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;
}

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

}

.triangle-up {
    width: 10%;
    height: 0;    
    padding-left:10%;
    padding-bottom: 10%;
    overflow: hidden;
}

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

JavaScript

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

function AnimateCtrl($scope, $defer) {


function createShape (Color, X, Y) {
        return {
            color     : Color,
            x         : X,
            y         : Y
        };
    };
    // Publish list of shapes on the $scope/presentationModel
    $scope.shapes   = [];
  $scope.circle   = [];
    $scope.square   = [];
     $scope.triangle   = [];
    // Create shapes
 
        $scope.cirlce.push( createShape(0xFFFFFF, 100,150) );
        $scope.cirlce.push( createShape(0xFFFFFF, 100,150) );
        $scope.square.push( createShape(0xFFFFFF, 100,250) );
        $scope.triangle.push( createShape(0xFFFFFF, 100,350) );
    
}