Custom Directive

http://angularjs.org/

HTML

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<div ng-controller="mainController">
    <div color="green" the-message="first one" ui-calendar="test"></div>
    <div color="blue" the-message="second one" ui-calendar="test"></div>
</div>

JavaScript

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

function mainController($scope) {
    $scope.green = 'suckmydong';
    $scope.blue = 'blue';
}

myApp.directive('uiCalendar', function () {
    return {
        restrict: 'A',
        scope: {
            message: "@theMessage",
            color: "=" //works with @
        },
        link: function (scope, element, attrs) {
            scope.color = scope.color === undefined ? 'black' : scope.color;
            $(element).append('<p style="color:'+scope.color+'">added this2: ' + scope.message + ' (' + scope.color + ')</p>');
        }
    };
});