bootstrap-timepicker directive not working inside ng-repeat

Question

Plunker demo

I'm trying to create an arbitrary number of timepicker, when hardcoded they work fine but it stops working when I put them into an ng-repeat. Is there a way to fix this?

Answer 1

I just updated my Plunker with a better solution.

Tiago answered AngularJS ng-repeat finish event with a great directive that will solve your issue without using the $timeout

Here is a copy of the directive:

app.directive('myRepeatDirective', function() {
   return function(scope, element, attrs) {
      if (scope.$last) {
         $('.bootstrap-timepicker').timepicker();
      }
   };
});

HTML:

<li ng-repeat="list in lists" my-repeat-directive>
   {{list.name}}
   <div class="input-append">
      <input type="text" class="bootstrap-timepicker">
      <span class="add-on"><i class="icon-time"></i></span>
   </div>
</li>

This is better because if you repeater requires data from an ajax request than your timeout could have to be altered and cause an ugly user experience.

Tiago's method seems to handle it best, in my opinion, you might also want to give him an upvote :)

Answer 2

I solved this using the ng-init because solution provided by Asok was not working for me. I also didn't want to use $scope

AngularCode

angular.module('MyApp', [])
    .controller('MyController', MyController);
function MyController($http) {

// your code here...
jd.InitTime = function () {
        $('.bootstrap-timepicker').timepicker();
    };
};

HTML

<div data-ng-app="MyApp" data-ng-controller="MyController as mc">
    <li ng-repeat="list in mc.lists">
       {{list.name}}
      <div class="input-append">
          <input type="text" class="bootstrap-timepicker" ng-init="mc.InitTime();">
          <span class="add-on"><i class="icon-time"></i></span>
       </div>
    </li>
</div>