Angularjs 在重复函数的第一次调用时不附加动态创建的 qrcode

问：

我有一种情况，在 ng-repeat 结束时，我正在执行一个函数，然后将 qrcode 附加到刚刚在 ng-repeat 中创建的 s 中。在该函数的末尾，调用每 5 分钟重复一次相同的函数以刷新 QRCodes。<DIV>

一般来说，它工作，除了函数的第一次执行外，它被正确调用并正确执行，只是没有将 qrcode 添加到 DIV 中。但是在第 2 次和所有后续刷新调用中，它成功附加了 qrcode。

HTML格式：

    <div ng-repeat="ticket in club.tickets" ng-init="$last && genQRCode()">
      <div id="ticketID_{{ticket.ticketID}}"></div>
      <div >{{ticket.ticketName}}</div>
    </div>

控制器：

  $scope.ticketTimer ;
  $scope.genQRCode = function() {
    for (var x=0;x<$scope.club.tickets.length;x++) {
      var ticket = $scope.club.tickets[x] ;

      // remove any elements inside the DIV
      // needed for $timeout re-calling the genQRCode
      // as it will just attach another qrcode <canvas>, not overwriting the first
      angular.element(document.querySelector('#ticketID_'+ticket.ticketID)).empty() ;
  
      // this attaches a <canvas> to the DIV
      jQuery('#ticketID_'+ticket.ticketID).qrcode({width:150,height:150,text:"SomeString"}) ;
    }
    $scope.ticketTimer = $timeout(function(){
      console.log("Next QR triggered") ;
      $scope.genQRCode() ;
    },30000) ;  // 5 minutes = 300000    
  }

我怀疑这与没有认识到 #elementID 是在 ng-repeat 之后立即创建的有关，但我还想不通。但是，在第一次调用时不会抛出错误，表明它确实在 DOM 中看到了元素 DIV。jQueryangular.element(....).empty()

在所有刷新调用中，呈现的 DOM 如下所示，QR 码确实出现在标记中：genQRCode<canvas>

<div ng-repeat="ticket in club.tickets" style="text-align:center;padding-left: 50px;padding-right:10px;" class="" ng-init="$last &amp;&amp; genQRCode()">
   <div id="ticketID_15">
     <canvas width="196" height="196"></canvas>
   </div>
   <div class="ng-binding">Entry</div>
</div>