Angular + Bootstrap + Datepicker = not working - angularjs

Question

I'm using AngularJs 1.6 with angular-ui-bootstrap 2.5.0 (bootstrap-ui-tpl.min.js)
On loading the page, the model value (dateOfBirth) is not getting pre-populated in the date picker textbox. It seems, many have reported similar issues for different versions of angular/bootstrap but nothing seems to work.
HTML:
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dateOfBirth" datepicker-options="dateOptions"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openDobDatePicker()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
Javascript:
$scope.format = 'dd/MM/yyyy'
$scope.dateOfBirth = '05/12/2004'
$scope.dateOptions = {
maxDate: new Date(),
startingDay: 1,
showWeeks: false
}
Edit:
It seems angular provides uibDateParser to parse String to Date object. However, the following fails silently:
$scope.dateOfBirth = $uibDateParser.parse('05/12/2004', 'dd/MM/yyyy')

Answer 1

It's not getting populated because it's a string and not a valid Date. So, if you change it like,
$scope.dateOfBirth = new Date("05/12/2004");
..it would work! Also, note that new Date(..) will come with local timezone so in case you want to change timezone or anything regarding manipulation of dates, momentjs is a great library to handle those.
EDIT: If your format is dd/MM/yyyy, you can maybe do something like this to convert in valid date:
var parts ='05/12/2004'.split('/');
$scope.dateOfBirth = new Date(parts[2],parts[1]-1,parts[0]));