Angular directives not working when dynamically loaded
When an HTML fragment is loaded and compiled by Angular, directives are not being linked
HTML
<script src="http://ci.angularjs.org/job/angular.js-angular-master/ws/build/angular.js"></script>
<div ng-app="appCount">
<div ng-controller="CountdownCtrl">
<input ng-model="end">
<button ng-click="addCountdown(end);">Add</button>
<div ng-repeat="cdn in countdowns" class="countdown" countdown-end="{{cdn}}">
<p ng-hide="over">{{days}} jours {{hours}} heures {{minutes}} min {{seconds}} sec</p>
<p ng-show="over">Done</p>
</div>
<p>Countdowns done: {{count}}</p>
</div>
</div>
JavaScript
var myModule = angular.module('appCount', []);
myModule.factory('countdownService', function($rootScope) {
var countService = {};
countService.count = 0;
countService.addCount = function() {
this.count++;
this.broadcastItem();
};
countService.broadcastItem = function() {
$rootScope.$broadcast('handleBroadcast');
};
return countService;
});
myModule.directive('countdown', function($timeout, countdownService) {
return {
restrict: 'C',
link: function(scope, elm, attrs) {
scope.BigDay = null;
scope.over = false;
attrs.$observe('countdownEnd', function(value){
if(scope.BigDay == null){
scope.BigDay = new Date(value);
scope.updateTime();
}
});
scope.updateTime = function() {
var now = new Date();
var timediff = scope.BigDay.getTime() - now.getTime();
if ( timediff <= 1000 ) scope.finished();
else {
scope.seconds = Math.floor(timediff/1000);
scope.minutes = Math.floor(scope.seconds/60);
scope.hours = Math.floor(scope.minutes/60);
scope.days = Math.floor(scope.hours/24);
scope.hours %= 24;
scope.seconds %= 60;
scope.minutes %= 60;
$timeout(scope.updateTime, 1000);
}
}
scope.finished = function() {
scope.over = true;
countdownService.addCount();
}
}
}
});
function CountdownCtrl($scope, countService) {
$scope.count = countService.count;
$scope.end = 'November 24, 2012 11:00:00';
$scope.countdowns = [];
$scope.$on('handleBroadcast', function() {
...