Simple Angular Binding demo with directive

Externalize the time into a separate directive component.

by Henry

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<div ng-app='demo'>
     <h3>Get Care Module</h3> 
        <div>
            <display-Thumbnail />
        </div>   
        <div>
        <display-link />
    </div>
</div>

CSS

.submodule-border{
 border-style:solid;
    border-color:black ;
    border-width:0.3px 0.3px 0.3px 0.3px;
}

.submodule-size{
    max-width:750px;
    max-height:1250px;
}
.thumbnail-size{
    max-width:40%;
    max-height:40%;
    margin:1% 1% 1% 1%;
    padding: 0.5%;
    background:black;
}
.thumbnail-margin-left{
    float: left;
}
.thumbnail-margin-right{
    float: right;   
}

JavaScript

var demo = angular.module('demo', []);
demo.directive('displayLink', function ($parse) {
    return {
        restrict: 'E',
        replace: true,
        transclude: false,
        template: '<a href="#"></a>',
        link: function (scope, element, attrs, controller) {
            //var knowmoreLink_ = "Know More";
            //element.text(knowmoreLink_);
        }
    }
});

demo.directive('displayThumbnail', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: false,
         scope: { },
        template: '<div class="submodule-size"><a href="#" ng-click="increment()"><img src="http://watermarked.cutcaster.com/cutcaster-photo-100900684-A-black-and-white-abstract-floral-background.jpg" class="thumbnail-size thumbnail-margin-left" alt="Smiley face"></a><div><div class="submodule-size"><a href="#" ng-click="increment()"><img src="http://watermarked.cutcaster.com/cutcaster-photo-100900684-A-black-and-white-abstract-floral-background.jpg" class="thumbnail-size thumbnail-margin-right" alt="Smiley face"></a></div><div class="submodule-size"><a href="#" ng-click="increment()"><img src="http://watermarked.cutcaster.com/cutcaster-photo-100900684-A-black-and-white-abstract-floral-background.jpg" class="thumbnail-size thumbnail-margin-left" alt="Smiley face"></a></div><div class="submodule-size"><a href="#" ng-click="increment()"><img src="http://watermarked.cutcaster.com/cutcaster-photo-100900684-A-black-and-white-abstract-floral-background.jpg" class="thumbnail-size thumbnail-margin-right" alt="Smiley face"></a></div><div class="submodule-size"><a href="#" ng-click="increment()"><img src="http://watermarked.cutcaster.com/cutcaster-photo-100900684-A-black-and-white-abstract-floral-background.jpg" class="thumbnail-size thumbnail-margin-left" alt="Smiley face"></a></div><div><a href="#" ng-click="increment()"><img src="http://watermarked.cutcaster.com/cutcaster-photo-100900684-A-black-and-white-abstract-floral-background.jpg"...