javascript - AngularJS ng スタイルが 2 回実行されていますか?

Question

要素から ng-repeat 属性を削除しても、randomWidth() 関数が 2 回呼び出されるという問題があります。この問題を回避する方法がわかりません。これを回避する方法があると思いますか、それとも明らかに省略しているものがあるのでしょうか?

HTML:

<div id="body-wrapper" ng-app="gallery" ng-controller="mainCtrl">
<section id="sidebar">

  <h1>Gallery</h1>

</section>

<main>
  <div class="box" ng-repeat="img in imgs" ng-style="{'width': randomWidth()}">
    <div class="box-wrapper"></div>
  </div>
</main>
</div>

Javascript:

angular.module('gallery', [])
.controller('mainCtrl', function($scope){

  $scope.imgs = [
    {
      title: 'image1'
    },
    {
      title: 'image2'
    },
    {
      title: 'image3'
    },
    {
      title: 'image4'
    },
    {
      title: 'image5'
    },
    {
      title: 'image6'
    }
  ];

  $scope.randomWidth = function(){
    const widths = ['25%', '33%', '40%', '50%'];
    const max = widths.length;
    const min = 0;
    var r = Math.floor(Math.random() * (max - min)) + min;
    console.log(widths[r]);
    return widths[r];
  }
})

ライブ コード: http://codepen.io/daviddiefenderfer/pen/qZpqdK