javascript - Angular CSS: ng-style は半分で機能し、他では機能しません

Question

私は Angular アプリケーションを持っていますが、これは 2 つの半分の分割画面を持ち、両方とも同じ配列値を持っています。幅と高さの値はサービスで設定され、コントローラーによって呼び出されます。スタイルは ng-style で DOM に設定されます。ただし、左半分は適切に配置されておらず、右半分は配置されています。ここに問題の画像があります：

関連するコードは次のとおりです。

RiderSettingsHalf.html

<div ng-controller="RiderSettingsHalf">
    <table>
        <tbody>
            <tr class="rider-settings-half-bar" ng-repeat="item in items" ng-style="{ 'width': wdt, 'height': hgt }"><td>{{item}}</td></tr>
        </tbody>
    </table>
</div>

そして、ここに関連するすべての Angular コードがあります。問題はコントローラーにあると思いますが、サービスとディレクティブも含めました。

angular.module('app').controller('RiderSettingsHalf', ['$scope', 'BarSize', function($scope, BarSize){
    var BS = BarSize.getBar();
    $scope.wdt = BS.wdt;
    $scope.hgt = BS.hgt;


    var items = {
        trip1: "TRIP 1",
        trip2: "TRIP 2",
        rideData: "RIDE DATA",
        status: "VEHICLE STATUS",
        info: "VEHICLE INFO",
        audio: "AUDIO",
        bluetooth: "BLUETOOTH",
        image: "CUSTOM IMAGE"
    };

    $scope.items = items;
}]);

angular.module('app').directive('riderSettingsScreen', ['BarSize', function(BarSize){
    return {
        templateUrl: 'public/templates/riderSettingsHalf.html',
        link: function(scope, elem, attrs){
            var settingBarHeight = elem[0].parentNode.offsetHeight / 5;
            var settingBarWidth = elem[0].parentNode.offsetWidth;
            BarSize.setBar(settingBarHeight, settingBarWidth);
        }
    };
}]);

angular.module('app').service('BarSize', function(){
    var val = {};

    this.setBar = function(h, w){
        val = {hgt: h, wdt: w};
        console.log(val);
    };
    this.getBar = function(){
        return val;
    };
});