var app = angular.module('triangular', []);
app.controller('MainCtrl', function($scope) {
$scope.graph = {'width': 100, 'height': 100}
$scope.circles = [
{'x': 15, 'y': 20, 'r':15},
{'x': 50, 'y': 60, 'r':20},
{'x': 80, 'y': 10, 'r':10},
]
});
<!DOCTYPE html>
<html ng-app="triangular">
<head>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.1/angular.js" data-semver="1.2.1"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<svg ng-attr-height="{{graph.height}}" ng-attr-width="{{graph.width}}">
<circle ng-repeat="circle in circles"
ng-attr-cx="{{circle.x}}"
ng-attr-cy="{{circle.y}}"
ng-attr-r="{{circle.r}}">
</circle>
</svg>
</body>
</html>
/* Put your css in here */