JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<div ng-app="app">
    <div>
        <panel title="clock">
            <clock timezone="MST"></clock>
            <clock timezone="MST"></clock>
            <clock timezone="MST"></clock>
        </panel>
    </div>
</div>

CSS

table{
    width:100%;
}
td{
    width:33%;
}

JavaScript

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

app.directive('panel', function(){
    return{        
        restrict:'E',
        replace:true,
        transclude: true,
        scope: { 
            title: '@'           
        },
        controller: function($scope, $element) {
            $scope.$on('clickObject', function($event) {
                alert('object clicked');
            });
        },        
        template: '<div>' + 
        '<div style="border: 3px solid green">{{title}}</div>' +
        '<div ng-transclude></div>' + 
        '</div>'
    }
});

app.directive('clock', function(){
    return{        
        restrict:'E',
        replace:true,
        scope: { 
            timezone: '@'
        },
        controller: function($scope, $element) {
            $scope.callHandler = function() {
                $scope.$emit('clickObject');
            }
        },
        template:'<div ng-click="callHandler()">12-00 PM {{timezone}}</div>'
    }
});