Show only those rows of selected objects whose sub object has a specific value using AngularJs

Question

Following is the JSON being used Its contains an array of objects (branch). Then those objects have sub-object called "service". I am trying to show branch name and its services. But only those with type cream.

[
  {
    "b_sn": "1",
    "b_name": "Alambagh",
    "service": [
      {
        "i_sn": "1",
        "i_name": "Vanilla",
        "i_type": "cream",
        "i_detail": ""
      },
      {
        "i_sn": "2",
        "i_name": "Orange",
        "i_type": "candy",
        "i_detail": ""
      }
    ]
  },
  {
    "b_sn": "2",
    "b_name": "Aminabad",
    "service": [
      {
        "i_sn": "3",
        "i_name": "Butterscotch",
        "i_type": "cream",
        "i_detail": ""
      },
      {
        "i_sn": "4",
        "i_name": "Blueberry",
        "i_type": "cream",
        "i_detail": ""
      }
    ]
  },
  {
    "b_sn": "3",
    "b_name": "Hazratganj",
    "service": [
      {
        "i_sn": "1",
        "i_name": "Orange",
        "i_type": "candy",
        "i_detail": ""
      },
      {
        "i_sn": "2",
        "i_name": "Mango",
        "i_type": "candy",
        "i_detail": ""
      }
    ]
  }
]

I want to display only those rows who have i_type ="cream", if any branch (object) does not have any number of sub-property "cream" then its b_name should not be displayed in the table.

Following is HTML code of the page:

<table>
  <tr>
    <th>SN.</th>
    <th>Branch Name</th>
    <th>Services</th>
  </tr>
  <tr data-ng-repeat="br in branches">
    <td>{{br.b_sn}}.</td>
    <td>{{br.b_name}}</td>
    <td>
      <table>
        <th></th>
        <tr data-ng-repeat="i in br.service">
          <td style="width:70%">{{i.i_sn}}. {{i.i_name}}</td>
          <td>{{i.detail}}</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 1

Thanks everyone for the help. I got my solution. Here is the code for the above problem.

    <div ng-app="myApp" ng-controller="myCtrl">

      <table class="table">
        <tr>
          <th>SN.</th>
          <th>Branch Name</th>
          <th>Services</th>
        </tr>
        <tr data-ng-repeat="br in branches | myFilter: {'key':key}">
          <td>{{br.b_sn}}.</td>
          <td>{{br.b_name}}</td>
          <td>
            <table>
              <tr data-ng-repeat="i in br.service|filter :{i_type:'cream'}">
                <td>{{i.i_sn}}. {{i.i_name}}</td>
                <td>{{i.detail}}</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>

    </div>

    <script>
      var app = angular.module('myApp', []);
      app.filter('myFilter', function() {
        return function(json, input) {
          console.log(json, input);
          var new_json = [];
          for(var i=0; i<json.length; i++){
            var flag = false;
            for(var j=0; j<json[i].service.length; j++){
              if(json[i].service[j].i_type == input.key){
                flag = true;
                  break;
              }
              else{
                flag = false;

              }
            }
            if(flag){
              new_json.push(json[i]);
            }
          }
          return new_json;
        };
      });
      app.controller('myCtrl', function($scope) {
        $scope.key = "cream";
        $scope.branches = [
          {
            "b_sn": "1",
            "b_name": "Alambagh",
            "service": [
              {
                "i_sn": "1",
                "i_name": "Vanilla",
                "i_type": "cream",
                "i_detail": ""
              },
              {
                "i_sn": "2",
                "i_name": "Orange",
                "i_type": "candy",
                "i_detail": ""
              }
            ]
          },
          {
            "b_sn": "2",
            "b_name": "Aminabad",
            "service": [
              {
                "i_sn": "3",
                "i_name": "Butterscotch",
                "i_type": "cream",
                "i_detail": ""
              },
              {
                "i_sn": "4",
                "i_name": "Blueberry",
                "i_type": "cream",
                "i_detail": ""
              }
            ]
          },
          {
            "b_sn": "3",
            "b_name": "Hazratganj",
            "service": [
              {
                "i_sn": "1",
                "i_name": "Orange",
                "i_type": "candy",
                "i_detail": ""
              },
              {
                "i_sn": "2",
                "i_name": "Mango",
                "i_type": "candy",
                "i_detail": ""
              }
            ]
          }
        ];

      });
    </script>