Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<my-directive></my-directive>

CSS

.square {
    height:50px;
    width:50px;
    border: 1px solid #000000;
}

JavaScript

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

myApp.directive('myDirective', ['$timeout', function ($timeout) {
    return {
        restrict: 'E',
        replace: false,
        link: function (scope, elem, attr) {

            scope.squares = [1,2,3,4,5];

            function colorSquares() {
                var squaresFromDOM = document.getElementsByClassName('square');
                for (var i = 0; i < squaresFromDOM.length; i++) {
                    squaresFromDOM[i].style['background-color'] = '#44DD44';
                }
            }
            
            // this does not work, apparently because the squares are not in the DOM yet            
            colorSquares();

            // this works (usually).  It alwasy works if I give it a delay that is long enough.           
            //$timeout(colorSquares);
            

        },
        template: '<div><div ng-repeat="s in squares" class="square"></div></div>'
    };
}]);