title: How do you show ng-repeated children of filtered array?
body: <p>I have a drop-down filtered array, but the array I'd like to use is a little more complex, with nested data, similar to this <a href="http://jsfiddle.net/vojtajina/u75us/" rel="nofollow">http://jsfiddle.net/vojtajina/u75us/</a></p>
  
  <p>I'd like to combine both ideas, but can't figure out why my fiddle doesn't display the 'child nodes'</p>
  
  
  
  <pre><code>&lt;div class="col-md-12" ng-controller="App04Ctrl"&gt;
      &lt;p&gt;Search:
        Filter:
        &lt;select ng-model="filterItem.store" ng-options="item.name for item in filterOptions.stores"&gt;
        &lt;/select&gt;
        Sort:
        &lt;select ng-model="sortItem.store" ng-options="item.name for item in sortOptions.stores"&gt;
        &lt;/select&gt;
      &lt;/p&gt;
      &lt;ul&gt;
        &lt;li ng-repeat="item in locations | orderBy:'price':reverse | filter:customFilter" &gt;Name: {{item.name}} Price: {{item.price}} Location: {{item.location}}&lt;/li&gt;
          &lt;ul&gt;
            &lt;li ng-repeat="package in location.packages"&gt;{{package.name}} has services:
              &lt;ul&gt;
                &lt;li ng-repeat="service in package.services"&gt;{{service.name}}&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>angular.js:</p>
  
  <p>
  
  <pre><code>var app = angular.module('app04', []);
  
  function App04Ctrl($scope) {
    //Contains the filter options
    $scope.filterOptions = {
      stores: [
        {id : 2, name : 'Show All', location: 'All Locations' },
        {id : 3, name : 'Ashburn', location: 'Ashburn' },
        {id : 4, name : 'San Francisco', location: 'San Francisco' },
        {id : 5, name : 'Denver', location: 'Denver' },
        {id : 6, name : 'Chicago', location: 'Chicago' },
        {id : 7, name : 'Irvine', location: 'Irvine' } 
      ]
    };
  
    //Contains the sorting options
    $scope.sortOptions = {
      stores: [
        {id : 1, name : 'Price Highest to Lowest' },      
        {id : 2, name : 'Price Lowest to Highest' },
        ]
    };
  
    //Mapped to the model to filter
    $scope.filterItem = {
      store: $scope.filterOptions.stores[0]
    }
  
    //Mapped to the model to sort
    $scope.sortItem = {
      store: $scope.sortOptions.stores[0]
    };
  
    //Watch the sorting model - when it changes, change the
    //ordering of the sort (descending / ascending)
    $scope.$watch('sortItem', function () {
      console.log($scope.sortItem);
      if ($scope.sortItem.store.id === 1) {
        $scope.reverse = true;
      } else {
        $scope.reverse = false;
      }
    }, true);
  
    //Custom filter - filter based on the location selected
    $scope.customFilter = function (locations) {
      if (locations.location === $scope.filterItem.store.location) {
        return true;
      } else if ($scope.filterItem.store.location === 'All Locations') {
        return true;
      } else {
        return false;
      }
    };  
  
    // Location data
    $scope.locations = [{
          name: "product1",
          price: 198,
          location: 'Ashburn',
          packages: [{
              name: 'Doom Patrol',
              services: [{
                  name: 'Mento'}, {
                  name: 'Vox'}, {
                  name: 'Robotman'}]}, {
              name: 'Suicide Squad',
              services: [{
                  name: 'King Shark'}]}, {
              name: 'Shadowpact',
              services: [{
                  name: 'Zauriel'}, {
                  name: 'Enchantress'}, {
                  name: 'Ragman'}, {
                  name: 'Nightshade'}]}]}, {
          name: "product2",
          price: 402,
          location: 'Chicago',
          packages: [{
              name: 'Metal Men'}, {
              name: 'Legion of Superheroes',
              services: [{
                  name: 'Ultra Boy'}, {
                  name: 'Kid Quantum'}]}]}, {
          name: "product2",
          price: 300,
          location: 'Denver',
          packages: [{
              name: 'Freedom Fighters',
              services: [{
                  name: 'Damage'}, {
                  name: 'Iron Munro'}]}, {
              name: 'Birds of Prey',
              services: [{
                  name: 'Huntress'}, {
                  name: 'Black Alice'}]}]}, {
          name: "product2",
          price: 1243,
          location: 'Irvine',
          packages: [{
              name: 'The Outsiders'}, {
              name: 'Zoo Crew',
              services: [{
                  name: 'Rubberduck'}, {
                  name: 'Captain Carrot'}]}, {
              name: 'The Elite',
              services: [{
                  name: 'Vera Black'}, {
                  name: 'Manchester Black'}]}, {
              name: 'Justice Legion Alpha'}]}
          ];
  
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/jdacio/Vfx3y/2/" rel="nofollow">http://jsfiddle.net/jdacio/Vfx3y/2/</a></p>
  
  <p>What am I missing? Am I on the right track? is there a better way to do this?</p>