Direcitve TEst

leanwx.com

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/black-tie/jquery-ui.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div>
     <input ng-repeat="x in ['blue', 'green']" type="checkbox" ng-model="settings.Window.Transparent"class="squaredThree" id="{{x}}box" insert-style/>
</div>

CSS

.blue{
    border-color:blue;
}
.green{
    background-color:green;
}
.squaredThree input {
    cursor: pointer;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 0;
    background:#f7f7f7;
    border:1px solid #6d7279;
}

JavaScript

var leanwxApp = angular.module('LeanwxApp', [], function () {});

var controllers = {};
var directives = {};
directives.insertStyle = [ function(){
    return {
       link: function(scope, element, attrs) {
           element.html(window.getComputedStyle(element[0], null)['background-color'])
       }
}   
}];

leanwxApp.controller(controllers);
leanwxApp.directive(directives);