Angular playground

by Andrei Yanovich

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<body ng-app="app">
<div>
    <div ng-controller="main">
        <selectLevel
            set-level="setLevel"
            candidate-levels="candidateLevels"        
        ></selectLevel>    
    </div>
</div>
<script type="text/ng-template" id="selectLevel.html">
    <div class="selectLevel" ng-repeat="level in levels.devs">
        <input type="radio" 
            id="level{{$index}}" 
            name="level" 
            ng-value="{{level}}"
            ng-model="level" 
            ng-change="setLevel(level)"
        />
        <label for="radio{{$index}}"><span>{{level}}</span></label>
    </div>
</script>
</body>

CSS

.selectLevel input[type="radio"] {
    display:none;
}
.selectLevel input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
    font-family:Arial, sans-serif;
    font-size:12px;
}

.selectLevel input[type="radio"] + label span {
     background-color:#FCFCFC;
}

.selectLevel input[type="radio"]:checked + label span{
     background-color: #B22748;
}

.selectLevel input[type="radio"] + label span,
.selectLevel input[type="radio"]:checked + label span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}

JavaScript

var CandidateLevels = {
    devs: ['d1', 'd2', 'd3', 'd4', 'd5'],
    managers: ['l1', 'l2', 'l3', 'l4', 'l5']
};

angular
.module('app', [])
.controller('main', function ($scope) {
    $scope.candidateLevels = CandidateLevels;
    $scope.setLevel = setCandidateLevel;
    
    function setCandidateLevel(level) {
        alert(level);
    }        
})
.directive('selectLevel', function() {
    function link($scope, $element) {
        
    }
    
    return {
        restrict: 'E',
        replace: true,
        scope: {
            setLevel: '&setLevel',
            levels: 'candidateLevels'
        },
        templateUrl: "selectLevel.html",
        link: link
    };
});