Eckige Wiederholung aktualisiert nicht

Question

Ich habe ein Problem mit meinem Winkel Repeater. Dies ist das erste Mal, dass ich eckig wirklich versucht habe und ich versuche, einen Repeater für Mitarbeiter zu bauen, den ein Manager hat. Der Repeater funktioniert wie vorgesehen, wenn ich die Anzahl der Mitarbeiter pro Zeile ändere, um die Liste zu filtern und die richtige Anzahl an Mitarbeitern in jeder Zeile anzuzeigen. Es gibt jedoch einen, der als horizontaler Anschluss für alle Mitarbeiter fungiert, dessen Breite sich nicht ändert.

<div ng-repeat-start="n in chart.renderRange(chart.data.employees.length,chart.employeeRenderBoxes)" 
    class="horizontalConnector" 
    ng-style="{'width': {{ chart.calcEmployeesHorizontalRowWidth((chart.data.employees| paging:n-1:chart.employeeRenderBoxes).length) }} + 'px' }"></div> 
<table ng-repeat-end class="employeeNav" cellspacing="0" cellpadding="0"></table> 

Mein Controller sieht wie folgt aus:

(function() { 
    'use strict'; 

angular 
    .module('app') 
    .controller('chartController', chartController); 

chartController.$inject = ['$log', 'bootstrappedData']; 

function chartController($log, bootstrappedData) { 
    /* jshint validthis: true */ 
    var vm = this; 
    vm.employeeRenderBoxes = 4; 
    vm.employeeRenderRange = 0; 
    vm.data = bootstrappedData.chartData; 

    vm.renderRange = renderRange; 
    vm.calcEmployeesHorizontalRowWidth = calcEmployeesHorizontalRowWidth; 

    function renderRange(employeeCount, employeeRenderBoxes) { 
     var _range = []; 
     var numberOfSplits = Math.ceil(employeeCount/((!!employeeRenderBoxes) ? employeeRenderBoxes : 1)); 
     for (var i = 1; i <= numberOfSplits; i += 1) { 
      _range.push(i); 
     } 
     vm.employeeRenderRange = _range.length; 
     return _range; 
    } 

    function calcEmployeesHorizontalRowWidth(rangeCounter) { 
     return (rangeCounter - 1) * 130; 
    } 
} 
})(); 

Was ich seltsam finde ist, dass die gerenderte HTML zeigt, dass die Breite ändert sich aber der Stil unverändert bleibt.

<div ng-repeat-start="n in chart.renderRange(chart.data.employees.length,chart.employeeRenderBoxes)" class="horizontalConnector ng-scope" ng-style="{'width': 390 + 'px' }" style="width: 650px;"></div> 

Kann jemand mir helfen zu verstehen, was mit meinem Winkelcode vor sich geht?

Answer 1

entfernt, um die {{}} von meinem ngstyle

<div ng-repeat-start="n in chart.renderRange(chart.data.employees.length,chart.employeeRenderBoxes)" 
class="horizontalConnector" 
ng-style="{'width': chart.calcEmployeesHorizontalRowWidth((chart.data.employees| paging:n-1:chart.employeeRenderBoxes).length) + 'px' }"></div>