title: Masonry not affecting page at all
body: <p>I'm working on a site in AngularJS and Masonry, and even though I think I initialized Masonry correctly, the Javascript file isn't changing the layout of the page at all. I'm very new to Masonry, so I'm guessing I just initialized wrong or something.</p>
  
  <p>Initialization HTML:</p>
  
  <pre><code>&lt;script src="js/masonry-init.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Relevant HTML:</p>
  
  <pre><code>&lt;div class="blog-entry-grid"&gt;
              &lt;div class="blog-grid-sizer"&gt;&lt;/div&gt;
              &lt;div class="blog-gutter-sizer"&gt;&lt;/div&gt;
              &lt;article ng-repeat="posts in bposts" class="blog-grid-item"&gt;
                  &lt;header class="entry-header blog-entry-header"&gt;
  
                      &lt;div class="entry-data"&gt;
                          &lt;span class="posted-on"&gt;
                              &lt;a ng-href="/../BlogPosts/{{posts.ID}}.html" rel="bookmark"&gt;
                                  &lt;time class="entry-date published updated" datetime="2015-08-20T02:48:02+00:00"&gt;{{posts.ID}}&lt;/time&gt;
                              &lt;/a&gt;
                          &lt;/span&gt;
  
                      &lt;/div&gt;
                      &lt;h1 class="entry-title"&gt;&lt;a ng-href="/../BlogPosts/{{posts.ID}}.html" rel="bookmark"&gt;{{posts.Title}}&lt;/a&gt;&lt;/h1&gt;    &lt;/header&gt;&lt;!-- .entry-header --&gt;
  
  
                  &lt;div class="entry-content"&gt;
                      &lt;p&gt;{{posts.Summary}}&lt;a class="read-more" ng-href="/../BlogPosts/{{posts.ID}}.html"&gt;Continue reading&lt;/a&gt;&lt;/p&gt;
                  &lt;/div&gt;&lt;!-- .entry-content --&gt;
              &lt;/article&gt;&lt;!-- #post-## --&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Relevant style.css</p>
  
  <pre><code>.blog-entry-grid {
  }
  .blog-gutter-sizer {
    width: 15%;
  }
  .blog-grid-sizer,
  .blog-grid-item { 
      width: 300px; }
  
  .blog-grid-item {
      float: left;
      background: #FFF;
      border: 2px solid #333;
      border-color: hsla(0, 0%, 0%, 0.5);
      margin-bottom: 30px;
  }
  </code></pre>
  
  <p>masonry-init.js</p>
  
  <pre><code>$(document).ready(function () {
  
      $('.blog-entry-grid').masonry({
          itemSelector: '.blog-grid-item',
          columnWidth: '.blog-grid-sizer',
          gutter: '.blog-gutter-sizer',
          percentPosition: true
      })
  
  });
  </code></pre>