Повторное использование шаблона html в проекте Angular

У меня есть этот файл шаблона html, range-details-dialog.tpl.html

<div class = "modal-header clearfix text-left">
    <h5>Update Range</h5>
</div>
<div class = "modal-body">
    <form name = "form" role = "form" class = "ng-pristine ng-valid" novalidate ng-submit = "updateRange()">
        <div class = "form-group-attached">
            <div class = "row">
                <div class = "col-sm-12">
                    <div class = "form-group form-group-default input-group p-l-10 p-r-10" ng-class = "{ 'has-error' : form.$invalid }">
                        <p ng-show = "form.rangeDaily.$error.min" class = "help-block">Daily range more than £5</p>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div class = "row">
        <div class = "col-sm-8"></div>
        <div class = "col-sm-4 m-t-10 sm-m-t-10">
            <button type = "button" class = "btn btn-primary btn-block m-t-5" 
             ng-disabled = "form.$invalid || promise" promise-btn = "promise" ng-click = "updateRange()">Update</button>
        </div>
    </div>
</div>

Тогда я хочу иметь еще один файл forced-range-details-dialog.tpl.html Вместо этого эти два файла могут быть одним файлом с динамически заполняемыми заполнителями. Это места, где потребуется замена:

1. <h5>Update Range</h5> станет <h5>Update Forced Range</h5>

2. <p ng-show = "form.rangeDaily.$error.min" class = "help-block">Daily range more than £5</p>

   станет:

   <p ng-show = "form.forcedRangeDaily.$error.min" class = "help-block">Forced Daily range more than £5</p>

3. ng-disabled = "form.$invalid || promise" promise-btn = "promise" ng-click = "updateRange()">Update</button>

   , ng-disabled = "form.$invalid || promise" promise-btn = "promise" ng-click = "updateForcedRange()">Update</button>

Есть ли способ избежать двух отдельных файлов шаблонов для вышеперечисленного? Не могли бы вы привести несколько примеров, ссылок или указателей того, как этого можно достичь?

Кроме того, я вижу в ответах, что решением было бы добавить логический параметр внутри компонента, а затем дважды вызвать его. Я не уверен, как вызвать компонент. Я вставил свой компонент ниже:

 angular.module('app.investment.rangeDetails')
  .component('pxForcedLimitAmount', {
      templateUrl: '/assets/js/apps/range/range-details-dialog.tpl.html',
      bindings: {
          amount: '<',
          isRequest: '<?',
          requestedAt: '<?',
          @Input() isForced: boolean  //<<----I added this based on answers below
      },
      controller: [function () {
          var ctrl = this;

          ctrl.$onInit = function () {
              ctrl.isRequest = ctrl.isRequest === true || false;
          };
      }],
  });