title: AngularJS displaying hierarchical data
body: <p>I'm trying to display a list of data in a hierarchical view.
  My data looks something like this:</p>
  
  <pre><code>items:[
    {
      "model_id": "1",
      "model_type_id": "1",
      "name": "Parent 1",
      "model_parent_id": ""
    },
    {
      "model_id": "2",
      "model_type_id": "1",
      "name": "Parent 2",
      "model_parent_id": ""
    },
    {
      "model_id": "3",
      "model_type_id": "2",
      "name": "Child 1",
      "model_parent_id": "1"
    },
    {
      "model_id": "4",
      "model_type_id": "2",
      "name": "Child 2",
      "model_parent_id": "2"
    }
  ]
  </code></pre>
  
  <p>My controller looks like:</p>
  
  <pre><code>myApp.controller('ModelController', ['$scope', 'ModelFactory',
      function ($scope, ModelFactory) {
  
          $scope.init = function (id) {
              $scope.brandId = id;
              getModels($scope.brandId);
          };
  
          function getModels(brandId) {
  
              ModelFactory.GetModels(brandId)
                  .success(function (mdls) {
                      $scope.models = mdls;
                      console.log($scope.mdls);
                  })
                  .error(function (error) {
                      $scope.status = 'Unable to load model data: ' + error.message;
                      console.log($scope.status);
                  });
          };
      }
  ]);
  </code></pre>
  
  <p>My HTML looks like:</p>
  
  <pre><code>&lt;div ng-controller="ModelController" ng-init="init(brand.ID)"&gt;
      &lt;ul ng-sortable class="block__list block__list_words"&gt;
          &lt;li ng-repeat="model in models | filter: {model_type_id:1} "&gt;{{model.model_name}} - {{model.model_id}}
  
              &lt;div ng-controller="ModelController" ng-init="init(brand.ID)"&gt;
                  &lt;ul ng-sortable class="block__list block__list_words"&gt;
                      &lt;li ng-repeat="m in models | filter: {model_type_id:2} | filter:{model_parent_id:model.model_id}"&gt;
                          {{m.model_name}} - {{m.model_parent_id}}
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The filter isn't working where I'm trying to filter on the inner controller with the outer controller. I'm getting both children displayed below each parent. How can I get it so the parent is displayed, and only the children are displayed where the childs model_parent_id equals the model_id of the parent?</p>