Angular UI Bootstrap对话框生成重复标记

Question

在我的应用程序中，我使用angularjs和angular-ui-bootstrap。我有一个简单的控制器用于我的应用程序，我在其中打开一个对话框：

var kbapp = angular.module('kbapp', ['ui.bootstrap.dialog'])
               .config(['$routeProvider', function ($routeProvider) {
                    $routeProvider.when('/', { templateUrl: '/views/templates/Index.html', controller: 'IndexController' });
                }]);

kbapp.controller('IndexController', ['$scope', '$timeout', '$dialog', function ($scope,     $timeout, $dialog) {
$timeout(function () {
    $dialog.dialog({}).open('views/templates/directives/Login.html');
}, 4000);
}]);

工作正常，4秒钟后对话框出现。但是，当我查看chrome dev工具中的标记时，我看到：

<div class="modal ng-scope">...dialog content...</div>
<div class="modal-backdrop"></div>
<div class="modal ng-scope">...dialog content...</div>

由于某种原因，对话框模板的内容被插入两次。有人能告诉我为什么会这样吗？

感谢。