Changing content in Angular UI Bootstrap modal
<p>I'm trying to have a counter in my Bootstrap UI modal, but I'm having some difficulty doing so. The code looks something like this:</p>

<pre><code>var openSessionWarningModal = function () {
    var markup = '&lt;div class="modal-header"&gt;&lt;h3 class="modal-title ng-binding"&gt;Are you still working?&lt;/h3&gt;&lt;/div&gt;';
    markup += '&lt;div class="modal-body"&gt;&lt;p class="ng-scope"&gt;Please confirm you are still working or your session will be ended in &lt;b&gt;{{$ctrl.secondsRemaining}}&lt;/b&gt;.&lt;/p&gt;&lt;/div&gt;';
    markup += '&lt;div class="modal-footer"&gt;&lt;button ng-click="$ctrl.ok()" class="btn btn-primary ng-binding" type="button"&gt;Yes, I\'m still here&lt;/button&gt;&lt;/div&gt;';
    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);
        }]
    });
};
</code></pre>

<p>I'm able to see the initial value of 60 in the UI, but as the timer decrements <code>$ctrl.secondsRemaining</code>, it does not update in the UI.</p>