Angular bootstrap datepicker isnt loading in a separate screen - angularjs

Question

I have a date picker in one screen/url (in the same app) where the template works and loads properly but now in a different screen/url (in the same app) the date picker doesnt display properly. It looks like:
Ive compared both codes from both screens and its not working..
function dateFilter() {
var directive = {
controller: dateFilterController,
controllerAs: 'vm',
bindToController: true,
restrict: 'E',
templateUrl: 'app/utils/directives/date-filter/date.filter.tpl.html',
scope: {
'popup': '=',//date format
'options': '=',//uib-datepicker options
'ngModel': '=',//selected date
'ngChange': '=',//filter function
'myId': '=',//id and name of uib-datepicker
'label': '=',//label that preceeds datepicker
'name': '=',//name of the property being filtered
'minDate': '=',//the minumum acceptable date
'maxDate': '=',//the maximum acceptable date,
'updateQuery': '=',
'query': '=',
'popupUrl': '='
}
};
return directive;
}
function dateFilterController() {
var vm = this;
vm.dateChanged = function (date) {
var newFilterValue = {
query: vm.query,
value: date
};
vm.updateQuery(newFilterValue);
};
vm.applyDateFilter = function (x) {
vm.dateChanged(x);
var from = true;
//If the label ends in to, that means we are filtering on the to date.
if (vm.label.substring(vm.label.length - 2, vm.label.length) === 'to') {
from = false;
}
//format the filter data in a way so it can be interpretted by ngChange
var temp = {
key: vm.name,//The name of the property being filtered
value: x,//The value from the filter
from: from//Boolean indicating if it is the to(false) or from(true) date.
};
vm.ngChange(temp);
};
vm.isOpen = false;
vm.ngClick = function () {
vm.isOpen = true;
};
}
This is the date filter tpl
<div class="date_input">
<label for="{{vm.myId}}">{{ vm.label | translate}}</label>
<input tabindex="0"
role="button"
aria-labelledby="fromToDescription"
id="{{vm.myId}}"
name="{{vm.myId}}"
type="text"
class="form-control"
uib-datepicker-popup="{{vm.popup}}"
datepicker-options="vm.options"
datepicker-popup-template-url="{{vm.popupUrl}}"
placeholder="mm/dd/yyyy" ng-pattern="/^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(20)\d{2}$/"
autocomplete="off"
ng-model="vm.ngModel"
is-open="vm.isOpen"
show-button-bar="false"
ng-change="vm.applyDateFilter(vm.ngModel)"
ng-click="vm.ngClick($event)"
minDate="vm.minDate"
maxDate="vm.maxDate"
/>
</div>
html where I used the directive.
<!-- FROM DATE -->
<date-filter
popup="$ctrl.formats"
options="$ctrl.dateOptions"
ng-model="$ctrl.fromDate"
ng-change="$ctrl.filterFunction"
name="customFromDate"
label="$ctrl.fromVerbiage"
min-date="$ctrl.dateOptions.minDate"
max-date="$ctrl.dateOptions.maxDate"
my-id="customFromDate"
update-query="$ctrl.updateQuery"
query="customFromDate"
popup-url="$ctrl.popupTpl"
></date-filter>
<div> <!-- TO DATE -->
<date-filter
popup="$ctrl.formats"
options="$ctrl.dateOptions"
ng-model="$ctrl.toDate"
ng-change="$ctrl.filterFunction"
name="customToDate"
label="$ctrl.toVerbiage"
min-date="$ctrl.dateOptions.minDate"
max-date="$ctrl.dateOptions.maxDate"
my-id="customToDate"
update-query="$ctrl.updateQuery"
query="customToDate"
popup-url="$ctrl.popupTpl"
></date-filter>
</div>