Фильтр Angularjs, использующий и возвращающий объект: Uncaught Ошибка: [$ rootScope: infdig]

Question

Я хотел бы создать собственный фильтр angularjs , который потребляет и возвращает объект. Код ниже терпит неудачу в бесконечном цикле пищеварения. В чем причина проблемы и каковы возможные решения?

angular.module('app', [])

angular.module('app')
  .controller('ctrl', ['$scope', function ($scope) {
    $scope.obj = {
      word: 'world'
    }
  }])
  
angular.module('app')
  .component('myComp', {
    template: '<em>word: {{$ctrl.param.word}}</em>',
    bindings: {
      param: '<',
    }
  })
  
angular.module('app')
  .filter('greet', function () {
    return function (object) {
      return {
        word: 'Hello ' + object.word
      }
    }
  })

angular
  .bootstrap(document.querySelector('#app'), ['app']);
  

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>

<div id="app" ng-controller="ctrl">
  <my-comp param="obj | greet" ></my-comp>
</div>

Я заметил, что если вход фильтра является литералом объекта, все работает нормально. Таким образом, похоже, что он не имеет прямого отношения к возвращению нового объекта каждый раз, когда фильтр вызывается, как предложено на infdig страница с ошибкой.

angular.module('app', [])

angular.module('app')
  .controller('ctrl', ['$scope', function ($scope) {
    $scope.obj = {
      word: 'world'
    }
  }])
  
angular.module('app')
  .component('myComp', {
    template: '<em>word: {{$ctrl.param.word}}</em>',
    bindings: {
      param: '<',
    }
  })
  
angular.module('app')
  .filter('greet', function () {
    return function (object) {
      return {
        word: 'Hello ' + object.word
      }
    }
  })

angular
  .bootstrap(document.querySelector('#app'), ['app']);
  

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>

<div id="app" ng-controller="ctrl">
  <my-comp param="{ word: 'foo' } | greet" ></my-comp>
</div>