javascript - Two identical nested ng-repeat filters from JSON - One doesn't work? -

i have few json data sources use filter through data in ng-repeat loops. 1 set works perfect together, other (which seemingly identical) not , have no idea why.

module:

var app = angular.module('myapp', ['app.services.data']); 

services

angular.module('app.services.data', []) .service('emails', ['$http', function($http){    var promise = null;       return function() {         if (promise) {           return promise;         } else {           promise = $http.get('data/emails.json');           return promise;         }       };   }])   .service('brands', ['$http', function($http){      var promise = null;       return function() {         if (promise) {           return promise;         } else {           promise = $http.get('data/brands.json');           return promise;         }       };   }])   .service('collections', ['$http', function($http){         var promise = null;       return function() {         if (promise) {           return promise;         } else {           promise = $http.get('data/collections.json');           return promise;         }       };   }]); 

emails.json example:

[    {       "id": 32,       "emailmetrics" [],       "date": "2015-04-24",       "brand": "brand a"    } ] 

brands.json example:

[    {       "id": 48,       "brandmetrics" [],       "name": "brand k"    } ] 

collections.json example:

[    {       "id": 23,       "collectionmetrics" [],       "name": "collection d"    } ] 

controller:

angular.module('myapp').controller('mainctrl', ['$scope', 'emails', 'brands', 'collections', function($scope, emails, brands, collections) {    emails().success(function(emails) {       $scope.emails = emails;    });        brands().success(function(brands) {       $scope.brands = brands;    });    collections().success(function(collections) {       $scope.collections = collections;    });     $scope.viewcount = 'metrics[0].views'; }]); 

view:

<ul data-ng-repeat="brand in brands | orderby:viewcount:true | limitto:'4'">     <li>some label</li>     <li class="card" data-ng-repeat="email in emails | orderby:viewcount:true | filter:{brand:brand.name} | limitto:'3'">       ...      </li> </ul>  <ul data-ng-repeat="collection in collections | orderby:viewcount:true | limitto:'2'">     <li>some label</li>     <li class="card" data-ng-repeat="email in emails | orderby:viewcount:true | filter:{collection:collection.name} | limitto:'7'">       ...      </li> </ul> 

in above example, first parent / child loop works flawlessly. first ng-repeat queries "brands" json 4 popular brands based on view count, nested ng-repeat gets 3 popular emails "emails" json , filters data using key/value parent ng-repeat.

however, second section fails without executing loop. odd because both identical except different name parent repeat.

all code has been linted / validated.

does have thoughts why there problem?

the problem filter on email list in 2 repeats.

the first repeat filtering using filter: {brand:brand.name}. searching each email object attribute "brand" matches value in brand.name defined in ng-repeat. works fine.

your second repeat filtering using filter: {collection:collection.name}. problem, since email objects not have "collection" key/value pair on them. filters out emails.

emails.json should this:

[    {       "id": 32,       "emailmetrics" [],       "date": "2015-04-24",       "brand": "brand a",       "collection": "collection d"    } ]