How can I synchronize DOM element width in AngularJS? -

i synchronize width of dom elements such width smallest width can accommodate content. can increase size $watching increase (based on ref1 & ref2), can't figure out how shrink element after it's been enlarged.

angular directive:

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> 

i'm assuming issue 2 elements referencing another. i'm thinking pseudocode like:

set global groupminwidth variable detect element.contentwidth changed if newcontentwidth > groupminwidth {   groupminwidth = newcontentwidth; }  if oldcontentwidth == groupminwidth {   check synchronized elements , set groupminwidth largest contentwidth; } 

thanks help.

i'm working on plunkr not working yet : https://plnkr.co/edit/6xfgmzi1su8cphjkydwc?p=preview . point $watching change on text, when text gets reduced, use shared value/global value record , check one's width widest , set min-width value both of elements.

===edit===

finally make work: https://plnkr.co/edit/c2fou5lfpfgfnku12ktg?p=preview

so principle behind : need changeable div measure scrollwidth/offsetwidth when content changed. add new nested div include content. made inner div float , once content changed update outer div's width setting it's width inner div's width. key point because inner div float, can overflows outer div's right border, out div watching change on content, outer div's width updated immediately.