Angular JS seed

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<div>First:
    <ul id="first" css-test></ul>
</div>

<div>Second:
    <ul id="second" css-test></ul>
</div>

<div>Third:
    <ul id="third" style="position: absolute; margin-left: 5px; padding-left: 5px;" css-test></ul>
</div>

CSS

div {
    position: relative;
    height: 100px;
}

#first {
    /* automatic styles */
}

#second {
    position: absolute;
    margin-left: 5px;
    padding-left: 5px;
}

JavaScript

angular.module('myModule', [])

.directive('cssTest', function() {
    return {
        link: function($scope, $element) {
            $element.append('<li>position: ' + $element.css('position') + '</li>');
            $element.append('<li>margin-left: ' + $element.css('margin-left') + '</li>');
            $element.append('<li>padding-left: ' + $element.css('padding-left') + '</li>');
            $element.css({
            	'background-color': 'black',
              'color': 'yellow',
              'font-size': '18px',
              display: 'inline'
             });
        }
    };
});