Angular: select list

http://angularjs.org/

HTML

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,700,700italic|Rokkitt:400,700.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<div ng-app="myApp">
    <!--Shameless link back to blog -->
    <h1>Random Class Directive</h1>
    <a href='http://www.whatibroke.com/?p=938'>www.whatibroke.com</a>
    
    <!-- Identical divs with random class directive added -->
    <div ng-controller="MyCtrl">
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
    </div>
</div>

CSS

/* Just a demo div */
.test{
    width: 50px;
    height: 50px;
    margin: 10px;
    padding: 5px;
    float: left;   
    -webkit-transition: 400ms linear all;
	-moz-transition: 400ms linear all;
	-ms-transition: 400ms linear all;
	-o-transition: 400ms linear all;
	transition: 400ms linear all;
    cursor: pointer;
    border-radius: 10px;    
}

.test:hover{
    opacity: 0.8;    
}

body{
	background-color: #F0F0F0;
	font-family: "Lato", sans-serif;
	font-weight: 300;
	color: #363636;
    text-align: center;
    vertical-align: middle;
}

/* Random classes */
.red {
    background-color: red !important;
    height: 75px;
    width: 75px;
}

.blue {
    background-color: blue !important;
    height: 40px;
    width: 40px;
}

.yellow {
    background-color: yellow !important;
    height: 20px;
    width: 20px;
}

.green {
    background-color: green !important;
    height: 63px;
    width: 63px;
}
.purple {
    background-color: purple !important;
    height: 82px;
    width: 82px;
}
.black {
    background-color: black !important;
    height: 29px;
    width: 29px;
}
.orange {
    background-color: orange !important;
    width: 42px;
    height: 42px;
}

JavaScript

/* 
    http://www.whatibroke.com/?p=938
    Adds a random class to element
    Usage: add ng-random-class to element
*/

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

app.controller("MyCtrl", function MyCtrl($scope) {
    
    /* A random class is picked from this list */
    $scope.classes = [
        //"bg-buildings",
        "red",
        "blue",
        "yellow",
        "green",
        "orange",
        "black",
        "purple"
    ];        
});

app.directive("ngRandomClass", function () {
    return {
        restrict: 'EA',
        replace: false,
        scope: {
            ngClasses: "="
        },
        link: function (scope, elem, attr) {            

            //Add random background class to selected element
            elem.addClass(scope.ngClasses[Math.floor(Math.random() * (scope.ngClasses.length))]);
        }
    }
});