Как я могу синхронизировать ширину элемента DOM в AngularJS?

Я хотел бы синхронизировать ширину элементов DOM таким образом, чтобы ширина всегда была наименьшей шириной, которая может вместить контент. Я могу успешно увеличить размер на $, наблюдая за увеличением (на основе ref1 и ref2), но я не могу понять, как уменьшить размер элемента после его увеличения.

Угловая директива:

app.directive('syncWidth', function () { //declaration; identifier master
  return {
    restrict: 'A',
    link: function (scope, element) {
      var linkElement = element[0];

      scope.$watch(
        function () {
          return (linkElement.scrollWidth);
        },
        function (newValue, oldValue) {
          if (newValue > oldValue) {
            scope.testWidth = {
              'min-width': newValue + 'px'
            }
          }
        },
        true
      );
    }
  };
});

HTML:

<input type="text" ng-model="myText">
<input type="text" ng-model="myText2">

<div sync-width="test" style="background-color: lightblue" ng-style="testWidth">1 [{{myText}}]</div>
<div sync-width="test" style="background-color: lightcoral" ng-style="testWidth">2 [{{myText2}}]</div>

Я предполагаю, что проблема состоит в том, что эти два элемента ссылаются на другой. Я думаю, что псевдокод будет выглядеть примерно так:

Set a global groupMinWidth variable
Detect element.contentWidth changed
If newContentWidth > groupMinWidth {
  groupMinWidth = newContentWidth;
}

If oldContentWidth == groupMinWidth {
  check all synchronized elements and set groupMinWidth to the largest contentWidth;
}

Спасибо за помощь.