Как подсчитать количество определенных строк во вложенном JSON с помощью AngularJS и отобразить в шаблоне.Выбор значения поля должен быть динамическим

Question

Я хочу напечатать сумму доступных полей по выбору пользователя.Критерием выбора суммы является «i_type».Например, пользователь хочет узнать общее количество доступных мороженых типа «конфеты» или «сливки».Я попробовал несколько методов, но не смог сделать это.Пожалуйста, предложите какой-нибудь метод для этого.Поскольку я новичок в AngularJS, будет очень любезно, если вы объясните это с помощью примера кода.Кодировать не обязательно только в AngularJS.Если в HTML есть какое-то решение, это тоже было бы здорово.

Ниже приведены мой код и JSON.Этот код без фильтра сумм.Поскольку никто из них не работал.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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>

Заранее спасибо.