cannot call methods on isotope prior to initialization; attempted to call method 'reLayout' angularjs
<p>Using <code>isotope</code> and <code>prettyPhoto</code> to create my gallery view with angular <code>js</code>, but getting the <strong>error cannot call methods on isotope prior to initialization; attempted to call method 'reLayout'</strong> Am loading my gallery view in controller as below:</p>

<p><strong>index.html</strong></p>

<pre><code>&lt;ng-view&gt;&lt;/ng-view&gt;
</code></pre>

<p><strong>app.js</strong></p>

<pre><code>angular.module("myapp", ["ngRoute", "ui.bootstrap", "slickCarousel"]).
config(function($routeProvider, $locationProvider) {
  $routeProvider.
  when("/home", {
    templateUrl: "partial views/home.html"
  })
}).controller("portfolioController", function($scope, $location) {
  //Portfolio
  $scope.$watch("$viewContentLoaded", function() {
    "use strict";
    var $container = $('.portfolio'),
      $items = $container.find('.portfolio-item'),
      portfolioLayout = 'fitRows';

    if ($container.hasClass('portfolio-centered')) {
      portfolioLayout = 'masonry';
    }
    var init = false;
    $container.isotope({
      filter: '*',
      animationEngine: 'best-available',
      layoutMode: portfolioLayout,
      animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false
      },
      masonry: {}
    }, refreshWaypoints());

    function refreshWaypoints() {
      init = true;
      setTimeout(function() {}, 1000);
    }

    $('nav.portfolio-filter ul a').on('click', function() {
      var selector = $(this).attr('data-filter');
      $container.isotope({
        filter: selector
      }, refreshWaypoints());
      $('nav.portfolio-filter ul a').removeClass('active');
      $(this).addClass('active');
      return false;
    });

    function getColumnNumber() {
      var winWidth = $(window).width(),
        columnNumber = 1;

      if (winWidth &gt; 1200) {
        columnNumber = 5;
      } else if (winWidth &gt; 950) {
        columnNumber = 4;
      } else if (winWidth &gt; 600) {
        columnNumber = 3;
      } else if (winWidth &gt; 400) {
        columnNumber = 2;
      } else if (winWidth &gt; 250) {
        columnNumber = 1;
      }
      return columnNumber;
    }

    function setColumns() {
      var winWidth = $(window).width(),
        columnNumber = getColumnNumber(),
        itemWidth = Math.floor(winWidth / columnNumber);

      $container.find('.portfolio-item').each(function() {
        $(this).css({
          width: itemWidth + 'px'
        });
      });
    }

    function setPortfolio() {
      setColumns();
      if (init) $container.isotope('reLayout');
    }

    $container.imagesLoaded(function() {
      setPortfolio();
    });

    $(window).on('resize', function() {
      setPortfolio();
    });
  });
})
</code></pre>

<p><strong>home.html</strong></p>

<pre><code>&lt;div id="portfoliowrap" ng-controller="portfolioController"&gt;
    &lt;h3&gt;LATEST WORKS&lt;/h3&gt;
    &lt;div class="portfolio-centered"&gt;
        &lt;div class="recentitems portfolio"&gt;
            &lt;div class="portfolio-item graphic-design"&gt;
                &lt;div class="he-wrap tpl6"&gt;
                    &lt;img src="/img/portfolio/portfolio_09.jpg" alt=""&gt;
                    &lt;div class="he-view"&gt;
                        &lt;div class="bg a0" data-animate="fadeIn"&gt;
                            &lt;h3 class="a1" data-animate="fadeInDown"&gt;A Graphic Design Item&lt;/h3&gt;
                            &lt;a data-rel="prettyPhoto" href="assets/img/portfolio/portfolio_09.jpg" class="dmbutton a2" data-animate="fadeInUp"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/a&gt;
                            &lt;a href="single-project.html" class="dmbutton a2" data-animate="fadeInUp"&gt;&lt;i class="fa fa-link"&gt;&lt;/i&gt;&lt;/a&gt;
                        &lt;/div&gt;&lt;!-- he bg --&gt;
                    &lt;/div&gt;&lt;!-- he view --&gt;
                &lt;/div&gt;&lt;!-- he wrap --&gt;
            &lt;/div&gt;&lt;!-- end col-12 --&gt;
            &lt;div class="portfolio-item books"&gt;
                &lt;div class="he-wrap tpl6"&gt;
                    &lt;img src="/img/portfolio/portfolio_10.jpg" alt=""&gt;
                    &lt;div class="he-view"&gt;
                        &lt;div class="bg a0" data-animate="fadeIn"&gt;
                            &lt;h3 class="a1" data-animate="fadeInDown"&gt;A Book Design Item&lt;/h3&gt;
                            &lt;a data-rel="prettyPhoto" href="assets/img/portfolio/portfolio_10.jpg" class="dmbutton a2" data-animate="fadeInUp"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/a&gt;
                            &lt;a href="single-project.html" class="dmbutton a2" data-animate="fadeInUp"&gt;&lt;i class="fa fa-link"&gt;&lt;/i&gt;&lt;/a&gt;
                        &lt;/div&gt;&lt;!-- he bg --&gt;
                    &lt;/div&gt;&lt;!-- he view --&gt;
                &lt;/div&gt;&lt;!-- he wrap --&gt;
            &lt;/div&gt;&lt;!-- end col-12 --&gt;

        &lt;/div&gt;&lt;!-- portfolio --&gt;
    &lt;/div&gt;&lt;!-- portfolio container --&gt;
&lt;/div&gt;&lt;!--/Portfoliowrap --&gt;
</code></pre>

<p>As you see, I've also used <code>$scope.$watch("$viewContentLoaded",</code> to make sure view is loaded. But still getting above error. <code>Isotope</code> is working fine, but <code>prettyphoto</code> isn't working which may be because of this error. Hope to get some guidance on this.</p>