Set the width of UL based on the number of li elements in it AngularJS

Question

I want to update the width of my UL based on the number of LI elements inside that UL, currently I'm doing this by creating a custom directive with a $timeout which is actually delaying the page to be loaded with the content and also I achieved this with a mixture of jQuery and AngularJS.

Is there a better way to do this in pure angular ways by watching for a variable in the controller and passing the same to ng-style? My page contains several ULs with variable number of LIs. Please suggest.

app.directive('setUlLength', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            $timeout(function () {
                var totli = $(element).find('ul').children('li').length;
                var liwid = $(element).find(".prod-gall ul li:first").outerWidth(true);
                var setUlWidth = totli * liwid;
                $(element).find('.prod-gall ul').css({ 'width': setUlWidth + 'px' });
            });
        }
    };
});