After examining your code, you had 2 errors:
- as Joachim Isaksson said, you need to lower-case you directive, for example: boxesDirective
- since you are using JQuery in your directive, you need to wrap your element with $ sign.
Example:
var app=angular.module('App', []);
app.directive('boxesDirective', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
console.log("s");
$(element).bind("click", '.boxes .col .ten', function(e){
e.stopPropagation();
var numBoxes = $('.boxes .col .ten.active').length;
if($(this).hasClass('active'))
{
$(this).removeClass('active');
$(this).find('input[type="checkbox"]').val('0');
return false;
}
else
{
if(numBoxes <10)
{
$(this).addClass('active');
$(this).find('input[type="checkbox"]').val('1');
return false;
}
}
});
}
};
});
Live example: http://jsfiddle.net/choroshin/dxwbb/1/