title: how to use jquery isotope and mansory with angular directive
body: <p>jquery with angular directive</p>
  
  <pre><code> var $document_body = $(document.body);
   var $portfolio_gallery = $(".gallery-isotope");
   var portfolio_filter = ".portfolio-filter a";
   var $portfolio_filter_first_child = $(".portfolio-filter a:eq(0)");
   var $portfolio_flex_slider = $(".portfolio-slider");
   var isotope_mode;
          if ($portfolio_gallery.hasClass("masonry")){
              isotope_mode = "masonry";
          } else{
              isotope_mode = "fitRows";
          }
  
          //isotope firsttime loading
          $portfolio_gallery.imagesLoaded(function(){
              $portfolio_gallery.isotope({
                  itemSelector: '.gallery-item',
                  layoutMode: isotope_mode,
                  filter: "*"
              });
          });
  
          //isotope filter
          $document_body.on('click', portfolio_filter, function(e) {
              $(portfolio_filter).removeClass("active");
              $(this).addClass("active");
              var fselector = $(this).data('filter');
  
              $portfolio_gallery.isotope({
                  itemSelector: '.gallery-item',
                  layoutMode: isotope_mode,
                  filter: fselector
              });
              return false;
          });
  </code></pre>
  
  <p>how to make angular directive with this jquery
  and to use jqlite</p>
  
  <h2>when running this jquery code in my controller the functions are not working properly</h2>
  
  <p>##</p>