Recommended approach to create custom controls in angularjs

Currently, I'm learning Angularjs and there are a number of requirements to build custom components. One of these is a date formatter - here is the sample angular module directive javascript:

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

myApp.directive('datetime', function () {
    return {
        restrict: 'E',
        scope: { value: '@value' },
        template: 
            '<span>{{value | date: "dd/MM/yyyy @ hh:mma"}}</span>'
        }
    }
);

which is used by the following html:

<tr ng-repeat="item in results.OpenProjects">
    <td><datetime value="{{ item.WhenCreated }}"></datetime></td>
</tr>

The above is working fine, but I'd like to know if I'm going about writing the controls in the way I've done.

Has anyone done this type of work and could chip in with their thoughts.

Thanks.