bootstrap timepicker is hiding behind the grid in ui-grid, Angular Js

I see, problem is that you this construction:

 $(function () {

            $('#timepicker').datetimepicker({
                //format: 'LT'
                format: 'HH:mm'
            });
 });

You have the same id #timepicker for every row

Solution

Create a directive, also we need position to store position config, and if we have $last element, we should toggle vertical position to top :

app.directive('timeControl', [function(){

  return {
     restriction: 'A',
     link: function(scope, elem, attr) {

    var position = {
        horizontal: 'right',
        vertical: 'bottom'
    }

     if(scope.$last === true) {
        position = {
        horizontal: 'right',
        vertical: 'top'
    }
     }

     elem.datetimepicker({
                //format: 'LT'
                widgetPositioning: position,
                widgetParent: elem,
                format: 'HH:mm'
            });



          elem.datetimepicker({
                //format: 'LT'
                format: 'HH:mm'
            });
  }
}

}]);

HTML

 <form name="inputForm">
<div class='input-group date' time-control style="position:absolute; width: 80px;">
                <input type='text' class="form-control" ng-class="col.colIndex()"  ng-model="MODEL_COL_FIELD" style="height:28px"/>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-time timer"></span>
                </span>
 </div>

You just add time-control attribute to div <div class='input-group date">

Plnkr example

Also screenshot