JSFiddle - React, Tailwind, and code Playground

by GruffBunny

HTML

<div ng-app='MyModule' ng-controller='MyController'>
    <div id='list'>
        <li ng-repeat='thing in things'>{{thing.name}}</li>
    </div>
    
    <p>The list width is {{width}}</p>
    
    <button type='button' ng-click='addLongThing()'>Add a long thing</button>
</div>

CSS

#list{
    background-color:red;
    display: inline-block;
}

JavaScript

angular.module('MyModule', [])

.controller( 'MyController', function($scope, $timeout){
    
    $scope.things = [
        { id: 1, name: 'Thing 1' },
        { id: 2, name: 'Thing 2' },
        { id: 3, name: 'Thing 3' }
    ];
    
    $scope.addLongThing = function(){
        $scope.things.push( { id: 4, name: 'A very long thing' } );
    };
    
    $scope.$watchCollection( 'things', function(){
        $timeout( function(){
            $scope.width = document.getElementById("list").offsetWidth;
        });
    });
    
    $scope.width = 0;
});