JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc3.min.js"></script>
<div ng-app="myModule">
  <sbuttons>
    <sbutton class="b1">abc</sbutton>
    <sbutton class="b2">def</sbutton>
  </sbuttons>
</div>

CSS

.u, .l, .b1, .b2 { display: block; padding: 10px; }

.u {background: red;}
.l {background: blue;}
.b1 {background: yellow;}
.b2 {background: green;}

JavaScript

angular.module("myModule", []).
    directive("sbuttons", function () {
        return {
            restrict: "E",
            transclude: true,
            template: '<ul class="u" ng-transclude></ul>',
            replace: true
        };
    }).
    directive("sbutton", function () {
        return {
            require: "^sbuttons",
            restrict: "E",
            transclude: true,
            template: '<li class="l"><button ng-transclude></button></li>',
            replace: true
        };
    });