title: Angularjs ng-repeat filter based on json value
body: <p>I have a plunker here - <a href="http://plnkr.co/edit/AmoiJi8k000OKA6TNdcz?p=preview" rel="nofollow">http://plnkr.co/edit/AmoiJi8k000OKA6TNdcz?p=preview</a></p>
  
  <p>I'm using dummy json here - <a href="http://myjson.com/4aqlh" rel="nofollow">http://myjson.com/4aqlh</a></p>
  
  <p>I want to display the json content in different parts of the page based on a value in the json</p>
  
  <p>So the stories with a value of Section: "New" will be displayed in one div and 'Old' in another.</p>
  
  <p>This works in the first div where 'New' is dispalyed but in the second div that should only display 'Old', it displays all the stories.</p>
  
  <p>Is there something wrong with the filter or is something to do with the order Angular builds the page.</p>
  
  <pre><code>        &lt;div class="container" data-ng-controller="myCtrl"&gt;
  
              &lt;div class="row"&gt;
  
                  &lt;div  class="col-sm-6"&gt;
                      &lt;div class="story" data-ng-repeat="story in stories | filter: story.Section='New' " &gt;
                          {{story.Title}}
                          {{story.Section}}
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div  class="col-sm-6"&gt;
                      &lt;div class="story" data-ng-repeat="story in stories | filter: story.Section='Old' "&gt;
                          {{story.Title}}
                          {{story.Section}}
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  </code></pre>