Угловой календарь JS не отображается должным образом

Question

Я использую Календарь в своем угловом интерфейсе, который выглядит как

    <div>
        <label style="font-size: medium">To Date</label>
        <p class="input-group">
            <input type="text" class="form-control"
                   id="toDate"
                   name="toDate"
                   uib-datepicker-popup="{{format}}"
                   ng-model="request.toDate"
                   is-open="popup2.opened"
                   datepicker-options="dateOptions"
                   ng-required="true"
                   close-text="Close"
                   alt-input-formats="altInputFormats"
                   required />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>

Календарь выглядит немного не так, как показано ниже

Но я ищу что-то вроде ниже

Я не уверен, что здесь отсутствует какая-либо директива по сборке.У меня есть ниже в моем app.js

angular.module("app", ['ngRoute', 'ngMaterial', 'ngAnimate', 'ui.bootstrap', 'ngMessages')

и index.cshtml

<script src="~/Lib/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="~/Lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>