isotope-layout not showing up on initial page load

[marvinrusinek]

I'm trying to use the isotope-layout for a project gallery on my website in Angular, but the gallery doesn't seem to display right, it only works when I refresh the page in the browser, sometimes several times (even locally). How can I get it to work so it loads completely on the first page load for the local app and deployed app? Also, the sorting of projects by date from most recent to oldest doesn't seem to work. I'm including my code below. I would appreciate any help.

/* configure Isotope plugin for project gallery /
$(document).ready(function() {
$(".myPortfolioGrid").isotope(
{
//percentPosition: true,
itemSelector: ".portfolioProject",
filter: ".web",
// layoutMode: "fitRows",
// transformsEnabled: false,
transitionDuration: "0.5s",
masonry: {
gutter: 20
},
getSortData: {
byDate: function ($elem) {
console.log(Date.parse($($elem).find('time').attr('title')));
return Date.parse($($elem).find('time').attr('title'));
/ return Date.parse($($elem).find(".dateCompleted").attr("title")); */
}
},
sortBy: "byDate",
sortAscending: false
});

$(".myPortfolioGrid").isotope({
  itemSelector: ".portfolioProject",
  getSortData: {
    byDate: function ($elem) {
      console.log(Date.parse($($elem).find('time').attr('title')));
      return Date.parse($($elem).find('time').attr('title'));
      /* return Date.parse($($elem).find(".dateCompleted").attr("title")); */
    }
  },
  sortBy: "byDate",
  sortAscending: false
});

$(".myPortfolioGrid").isotope("getSortData");

$("button.button").click(function () {
  var to_filter = $(this).attr("data-filter");
  (to_filter == "all") ? $(".myPortfolioGrid").isotope({filter: ".portfolioProject"})
    : $(".myPortfolioGrid").isotope({filter: "." + to_filter});
});

});

[kohkoksiang]

Dear Sir,
May I know how to setup isotope with jquery in angular? Thank you.

Im beginner so the above problems I dont have any ideas sorry