AngularJS: Render own module more than once

Question

I've been exploring with AngularJS for a few days now, and I thought of creating a datepicker. I bumpted onto a few things that aren't completely clear for me yet. At first, this is the code I wrote for my datepicker:

angular.module('datepicker', []).directive('myDatepicker', function() {
    return {
        scope: {
        clickCallback: '&',
        options: '='
    },
    restrict: 'E',
    templateUrl: 'datepicker.php',
    link: function($scope, $element, $attr) {      

        $scope.day = 0;
        $scope.month = 0;
        $scope.year = 0;

        $scope.years = [];
        $scope.days = [];
        $scope.months = getStandardMonths();

        $scope.init = function() {
            for (var i = 1; i <= 31; i++)
                $scope.days.push({
                    value: i, 
                    text: (i < 10) ? "0" + i : i
                });
            $scope.days.unshift({
                value: 0, 
                text: "--"
            });

            $scope.months.unshift({
                value: 0, 
                text: "--"
            });

            var year = new Date().getFullYear();
            var start = year + 3;
            var end = year - 50;

            for (var j = start; j >= end; j--) {
                $scope.years.push({
                    value: j, 
                    text: j
                });
            }
            $scope.years.unshift({
                value: 0, 
                text: "--"
            });
        }

        $scope.update = function() {
            var last = 32 - new Date($scope.year, $scope.month - 1, 32).getDate();
            if ($scope.day > last) {
                $scope.day = last;
            }

            last++;
            if ($scope.days.length > last) {
                var shrink = $scope.days.length - last;
                $scope.days.splice(last, shrink);
            } else {
                for (var i = $scope.days.length; i < last; i++)
                    $scope.days.push({
                        value: i, 
                        text: i
                    });
            }

            if ($attr.partial) {
                $scope.dism = !($scope.year);
                $scope.disd = !($scope.month);
                if (!$scope.year) {
                    $scope.disd = true;
                    $scope.day = $scope.month = 0;
                } 

                if (!$scope.month) {
                    $scope.day = 0;
                } 
            }
        }

        $scope.disd = $scope.dism = ($attr.partial === undefined) ? false : $attr.partial;

        $scope.init();
    }
};
});

This is the template I wrote in order to render the datepicker module:

<select ng-model="day" ng-options="d.value as d.text for d in days" ng-visible="!disd">     </select>
<select ng-model="month" ng-options="m.value as m.text for m in months" ng-change="update()" ng-visible="!dism"></select>
<select ng-model="year" ng-options="y.value as y.text for y in years" ng-change="update()"></select>

And my usage, which is fairly straight-forward:

<my-datepicker partial="true" />

Now, when I copy the line above several times, it still renders a single datepicker control (no multiple datepickers are shown on the html page). I can't seem to understand why, if anyone could shed some light here, I'd be very grateful.

I have a list of different items, all with its own date. My next step would be to bind the date in the list object to a function inside that datepicker.

Note: the partial attribute is to allow the user not to fill in a full date but only a year or year and month.

Answer 1

I fixed my own issues by reading up a little more about AngularJS. My mind was twisted too much in the traditional javascript way of coding. In case anyone else has this problem, here is my fixed code. The code below renders multiple instances of my datepicker directive:

<div ng-controller="DatepickerController" class="md">
        <p><b>Datepicker (partial)</b></p>
        <div ng-repeat="d in dates" ng-include src="'dateitem.php'" ></div>
        <br /><br />
        <p><b>Datepicker (non partial)</b></p>
        <select ng-model="selecteddate" ng-options="d as d.desc for d in dates"></select>
        {{selecteddate}}<br/>
        <my-datepicker ng-model="selecteddate.date"></td-datepicker>
    </div>

I use an ng-model to "bind" my mysql formatted date as string.

scope: {
        clickCallback: '&',
        options: '=',
        ngm: '=ngModel'
    },
    require: 'ngModel',

And these are my dates that need to be shown as a datepicker object:

function DatepickerController($scope) {
'use strict';

$scope.dates = [
{
    date: "2008-04-02",
    desc: "Full date"
},

{
    date: "2010-02-00",
    desc: "Missing day date"
},

{
    date: "1999-00-00",
    desc: "Missing month date"
},

{
    date: "0000-00-00",
    desc: "Empty date"
}
];

// non partial shizzle
$scope.selecteddate = $scope.dates[0];
}

Live example of the datepicker: http://sandbox.matvp.info/angularjs/?datepicker