How to filter the parent object by looping it's child array of object

Question

I am getting some of objects from back-end. each of the object has the child array called 'phaseIds', it has multiple array of object, from the array i required to find the "name" existance according to the filter..

once i filtered, that object need to show in the page. I tried but i coun't get the result. any one help me with correct way to do this?

at present i am filter by students, but i am getting all the objects without filtered.

var app = angular.module('myApp', []);

var projects = [
    {"name":"one", "PhaseIds":[
      {id:"1",name:"school"},
      {id:"2",name:"student"},
      {id:"3",name:"teacher"}
      ]},
      {"name":"two", "PhaseIds":[
      {id:"1",name:"school"},
      {id:"3",name:"teacher"}
      ]},
      {"name":"three", "PhaseIds":[
      {id:"1",name:"school"},
      {id:"2",name:"student"}
      ]},
      {"name":"four", "PhaseIds":[
      {id:"1",name:"school"},
      {id:"3",name:"teacher"}
      ]},
      {"name":"five", "PhaseIds":[
      {id:"1",name:"school"},
      {id:"3",name:"teacher"}
      ]}
  ]

app.controller('MainCtrl', function($scope) {
  
  $scope.projects = angular.forEach( projects, function (project) {
    
   var filteredProject = project;
   
   angular.forEach( project.PhaseIds, function ( phase ) {
     
    if(phase.name.toLowerCase().indexOf('student') > -1 ){ 
      //only required the students avilable projects
      
        return filteredProject;
      
    }
      
   })
    
  })
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
<ul>
      <li ng-repeat="project in projects">{{project.name}}</li>
</ul>
  </div>

Live Demo

Answer 1

You needn't put the logic in your controller code. You can achieve it in your HTML snippet as well by using $filter. Check below example. You can make your filter structure as deeper as you want.

<ul>
  <li ng-repeat="project in projects | filter:{ PhaseIds : { name : 'student' } }">{{project.name}}</li>
</ul>

Please check your plunker. I've updated it