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

Write a directive, it's the best option.

Directive example:

app.directive('colorbox', function() {
  return {   
    restrict: 'AC',    
    link: function (scope, element, attrs) {        
      $(element).colorbox(attrs.colorbox);     
    }
  };  
});

HTML:

Image