Ng-Style-3

In this example we have a random collection with color and x,y values. The color is set as background color and value of x assign to the css property 'left' and value of y assign to css property 'top'. Each time when you refresh the page new values will set.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style type="text/css">
    .circle {
        display: block;
        position: absolute;
        height: 20px;
        width: 20px;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        border-radius: 15px;
    }
</style>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <div ng-repeat="p in collection">
            <div class="circle" ng-style="{ 'backgroundColor':p.color, 'left':p.x+'px', 'top':p.y+'px' }">
        </div>
    </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.collection = [];
        for (var i = 0; i < 50; i++) {
            var color = Math.floor(Math.random() * 999 + 110);
                color = 'skyblue';
            $scope.collection.push({
                x: Math.min(1180, Math.max(40, (Math.random() * 1160))),
                y: Math.min(380, Math.max(20, (Math.random() * 380))),
                color: color
            })
        };

    }]);
</script>
</body>
</html>

Output