Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
  <ul>
      <li ng-repeat="task in tasks">
          <span class="task-text">{{task.title}}</span>
          <span class="task-datetime right" duedate="{{task.duedate}}"></span>
      </li>
  </ul>
</div>

JavaScript

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

myApp.directive('duedate', function() {
    return {
        restrict: 'A',
        replace: true,
        template: '<div><span class="date-daymon">{{day}}</span><br><span class="date-year">{{year}}</span><br><span class="date-time">{{time}}</span><br></div>',
        link: function (scope, iElement, iAttrs) {
            iAttrs.$observe('duedate', function(val) {
                console.log("duedate = " + val);
                var parts = val.split('@');
                if (parts.length > 1) {
                    scope.time = parts[1];
                } else {
                    scope.time = "";
                }
                var moreParts = parts[0].split(',');
                if (moreParts.length > 1) {
                    scope.year = moreParts[1];
                } else {
                    scope.year = "";
                }
                scope.day = moreParts[0];
            });
        }
    };
});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.tasks = [
        { title: 'first', duedate: 'Jun 6, 2014' },
        { title: 'second', duedate: 'Apr 12, 2014 @ 1pm' },
        { title: 'third', duedate: 'Daily @ 1pm' }
    ];
}