Angular JS Bootstrap Datepicker Popup Issue

http://jsfiddle.net/kalyanchakravarthys/8xe2cp48/

by apimenov93

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script>
<div ng-app="app">

    <div class='container-fluid' ng-controller="SomeCtrl">
        <input id="dobFrom" class="form-control" type="text" datepicker-popup="MM/dd/yyyy" ng-model="dOBFrom"  show-button-bar="false"  min-Date="'01/01/1753'" max-Date="'12/31/9999'" ng-pattern="/^(\d{4})-(\d{2})-(\d{2})$/" />
        DOBFrom {{ dOBFrom }}
        </div>
        </div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script><style> body {
    font-family:'Trebuchet MS', Verdana, sans-serif;
    margin:20px 0px;
    padding:0px;
    text-align:center;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    cursor:pointer;
}
label {
    cursor:default;
    margin:0;
}
.form {
    width:400px;
    margin:0px auto;
    text-align:left;
    background:#F2F1F0;
    border-top-left-radius: 10px 5px;
    border-top-right-radius: 10px 5px;
    border:1px solid #474641;
}
.formHeader {
    background:#474641;
    color:#ddd;
    padding:4px;
    font-weight:600;
    border-top-left-radius: 10px 5px;
    border-top-right-radius: 10px 5px;
}
.formBody {
    padding:10px;
}
.data {
    margin:0px auto;
    text-align:left;
}
.dropdown-menu {
    text-align:left;
}

JavaScript

angular.module('app', ['ui.bootstrap']);

function SomeCtrl($scope, $http, limitToFilter) {
		$scope.dOBFrom = new Date();
}