Angular table last added row not loading bootstrap calendar - angularjs

Question

I am using angular to load meeting information into a table. When i try to add a new row to the table, the added row does not load the last bootstrap calendar because angular hasn't yet finished loading the row when i call a function to dynamically load the datepicker. How can i call load the datepicker after Angular has finished loading the new row?
Here's my code:
<div ng-controller="virtualmeetingdetails" id="virtualmeetingdetails">
<div class="row" id="proposedaddboards">
<div class="form-group required">
<label id="adboardnumber" class="control-label col-sm-4" for="spinner1">Proposed Number of Advisory Boards</label>
<div class="col-sm-4">
<div id="spinnerDiv1" class="input-group spinner">
<asp:TextBox id="spinner1" cssclass="form-control" value="0" runat="server" />
<div class="input-group-btn-vertical">
<button class="btn btn-default" type="button" ng-click="addUser()"><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="tblVirtualMeeting">
<div class="form-group required">
<div class="col-sm-12" >
<table class="table table-bordered table-striped" jq-table>
<thead style="background-color:#cad4d9">
<tr>
<th>Proposed Date</th>
<th>Virtual Meeting</th>
<th>Location City</th>
<th>State</th>
<th>Country</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="meeting in meetings">
<td>
<div class="input-group input-append date" id="dtpicker{{$index}}" data-date-format="mm/dd/yyyy" style="width:150px;">
<span class="text-center" ng-show="editMode">{{meeting.proposedbegindate}}</span>
<input type="text" class="form-control col-sm-3" runat="server" ng-hide="editMode" ng-model="meeting.proposedbegindate" />
<span class="input-group-addon add-on" ng-hide="editMode">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</td>
<td>
<select ng-model="meeting.isvirtualmeeting" ng-hide="editMode"
ng-options="option.text for option in virtualmeetingoptions track by option.value" class="form-control">
</select>
<span class="text-center" ng-show="editMode">{{meeting.isvirtualmeeting.text}}</span>
</td>
<td>
<span class="text-center" ng-show="editMode">{{meeting.venuecity}}</span>
<input type="text" class="form-control" ng-hide="editMode" ng-model="meeting.venuecity" />
</td>
<td>
<select ng-model="meeting.venuestateID" ng-hide="editMode" ng-options="state.StateConst for state in statesList track by state.StateID" class="form-control"></select>
<span class="text-center" ng-show="editMode">{{meeting.venuestateID.StateConst}}</span>
</td>
<td>
<select ng-model="meeting.venuecountryid" ng-hide="editMode" ng-options="country.CountryName for country in countriesList track by country.CountryID" class="form-control"></select>
<span class="text-center" ng-show="editMode">{{meeting.venuecountryid.CountryConst}}</span>
</td>
<td style="width:170px">
<span class="glyphicon glyphicon-pencil" style="color: green; font-size: medium; cursor: pointer" ng-show="editMode" ng-click="editMode = false; editUser(participant)"></span>
<span class="glyphicon glyphicon-floppy-save" style="color: #337ab7; font-size: medium; cursor: pointer" ng-hide="editMode" ng-click="editMode = true;saveField(meeting, <%=_CurrentUserID %>);"></span>
<span class="glyphicon glyphicon-remove-circle" style="color: red;font-size:medium;cursor:pointer" ng-click="removeItem($index)"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Controller:
app.controller("virtualmeetingdetails", function ($scope, $http) {
$http.get("../Services/EngagementDataService.asmx/GetVirtualMeetings", { params: { 'mid': getParameterByName('mid')} })
.success(function (response) {
var j = response.length;
var i = 0;
if (response.length > 0) {
while (i < j) {
response[i].proposedbegindate = moment(response[i].proposedbegindate).format("MM/DD/YYYY");
i++
}
}
....more code goes here (removed)
$scope.addUser = function () {
$scope.editing = true;
var meetingcount;
if (typeof $scope.meetings === "undefined")
meetingcount = 0
else meetingcount = $scope.meetings.length;
$scope.inserted = {
engagementproposedinfoid: 0,
id: meetingcount + 1,
venuecity: '',
proposedbegindate: '',
venuestateid: 0,
venuecountryid: 1,
isvirtualmeeting: 0
};
$scope.meetings.push($scope.inserted);
rendercalendars(meetingcount);
};
});
Function to render datepicker:
function rendercalendars(rows) {
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var j = rows;
var i = 0;
while (i < j) {
$('#dtpicker' + i).datepicker({ autoclose: true, startDate: today });
i++
}
}
The issue happens when $scope.addUser gets called... it loads the table row before the rendercalendars function gets called so the datepickers don't get loaded.
Any help will be appreciated.

Answer 1

My guess would be something like this:
With this line you change your scope and on your next digest cycle your repeat will be "redone". So your html gets adjusted.
$scope.meetings.push($scope.inserted);
Then you call your render function and its all messed up if the digest hit before.
rendercalendars(meetingcount);
But that's just a guess of mine.
BTW there is an angular implementation for bootstrap components (ui-boostrap) then you don't have to do jQuery stuff.
Home this is some sort of help.