title: Pass a timeout to angular bootstrap Modal
body: <p>I'm trying to pass a timeout to a bootstrap modal in Angular JS, in order to show a couple of buttons and cancel that timeout if one of them is clicked</p>
  
  <p>The scenario of what I'm trying to do: I have a sessión that expires in 3 minutes, so in 1.5 minutes I show that modal to the user prompting if he wants to extend the session, if he clicks "Ok", I cancel the timeout and call a function that reset the notification again.</p>
  
  <p>If i try to pass it using the resolve that comes with the Modal, the modal launches just when the Timeout ends, (i guess this might be since it's a promise)</p>
  
  <p>This doesn't has to be the solution but it's what i came up with, if anyone else has a better way or practice, I'll appreciate if you can share</p>
  
  <p><a href="http://plnkr.co/edit/QTNXhXDelCRMmqhm0Dse" rel="nofollow">Here is the plunker to see it</a></p>
  
  <h2>Code</h2>
  
  <p><strong>JS</strong></p>
  
  <pre><code>angular.module('app', ['ui.bootstrap'])
  .controller('Main', MainCtrl);
  
  MainCtrl.$inject = ['$modal', '$timeout'];
  function MainCtrl($modal,$timeout) {
    var vm = this;
  
    vm.callModal = callModal;
    /*vm.people = [
      'Fred',
      'Jim',
      'Bob'
    ];*/
    vm.time = $timeout(function() { // Timeout 
      alert("timeout ended");
    }, 10000);
  
    function callModal() {
      $modal.open({
        templateUrl: 'modal.html',
        controller: ['$modalInstance', 'time', ModalCtrl],
        controllerAs: 'vm',
        resolve: {
          time: function () { return vm.time; }
        }
      });
    }
  }
  
  function ModalCtrl($modalInstance, time) {
    var vm = this;
  
    console.log(time);
  
  }
  </code></pre>
  
  <p><strong>Main</strong></p>
  
  <pre><code> &lt;body ng-controller="Main as vm"&gt;
      &lt;button type="button" class="btn btn-sm btn-primary" ng-click="vm.callModal()"&gt;Call modal&lt;/button&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p><strong>Modal</strong></p>
  
  <pre><code>&lt;div class="modal-header"&gt;
      &lt;h3 class="modal-title"&gt;Modal title&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
      {{ vm.timeout }}
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
      &lt;button class="btn" ng-click="$close()"&gt;Cancel&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>