How to use Colorbox with Angular JS

Question

How can I use colorbox (fancybox or lightbox is welcome too) with Angular JS, should I write a directive for it is there any other methods for it.

Here is my HTML:

Answer 1

I have tried bmleite directive in my code but it doesnt work. The cboxElement class added to the element but colorbox didnt open when clicked. Finally i found this directive which worked like a charm.

app.directive('colorbox', function($compile, $rootScope){
  return {
    link: function(scope, element, attrs){
      element.click('bind', function(){
        $.colorbox({
          href: attrs.colorbox,
          onComplete: function(){
            $rootScope.$apply(function(){
              var content = $('#cboxLoadedContent');
              $compile(content)($rootScope);      
            })
          }
        });
      });
    }
  };
});

Then in your html section use it with: