更改Angular UI Bootstrap模式中的内容

Question

我正在尝试在我的Bootstrap UI模式中使用计数器，但是我遇到了一些困难。代码看起来像这样：

var openSessionWarningModal = function () {
    var markup = '<div class="modal-header"><h3 class="modal-title ng-binding">Are you still working?</h3></div>';
    markup += '<div class="modal-body"><p class="ng-scope">Please confirm you are still working or your session will be ended in <b>{{$ctrl.secondsRemaining}}</b>.</p></div>';
    markup += '<div class="modal-footer"><button ng-click="$ctrl.ok()" class="btn btn-primary ng-binding" type="button">Yes, I\'m still here</button></div>';
    this.close();
    $modalInstance = $uibModal.open({
        animation: true,
        backdrop: 'static',
        template: markup,
        windowClass: 'modal-session-timeout',
        controllerAs: '$ctrl',
        controller: ['$scope', 'modalManager', function ($scope, modalManager) {
            var $ctrl = this;
            $ctrl.ok = function () {
                modalManager.close();
            };
            $ctrl.secondsRemaining = 60;

            var timer = setInterval(function () {
                $ctrl.secondsRemaining--;
            }, 1000);
        }]
    });
};

我能够在UI中看到60的初始值，但随着计时器递减$ctrl.secondsRemaining，它不会在UI中更新。