title: opening a modal in a route in AngularJS with angular-ui-bootstrap
body: <p>I am trying to do what was essentially answered here <a href="https://stackoverflow.com/questions/20585541/unable-to-open-bootstrap-modal-window-as-a-route">Unable to open bootstrap modal window as a route</a></p>
  
  <p>Yet my solution just will not work. I get an error </p>
  
  <p><code>Error: [$injector:unpr] Unknown provider: $modalProvider &lt;- $modal</code></p>
  
  <pre><code>My app has the ui.bootstrap module injected - here is my application config
  
  var app = angular.module('app', ['ui.router', 'ui.bootstrap','ui.bootstrap.tpls', 'app.filters', 'app.services', 'app.directives', 'app.controllers'])
  
      // Gets executed during the provider registrations and configuration phase. Only providers and constants can be
      // injected here. This is to prevent accidental instantiation of services before they have been fully configured.
      .config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
  
          // UI States, URL Routing &amp; Mapping. For more info see: https://github.com/angular-ui/ui-router
          // ------------------------------------------------------------------------------------------------------------   
  
          $stateProvider
              .state('home', {
                  url: '/',
                  templateUrl: '/views/index',
                  controller: 'HomeCtrl'
  
              })
              .state('transactions', {
                  url: '/transactions',
                  templateUrl: '/views/transactions',
                  controller: 'TransactionsCtrl'
              })      
              .state('login', {
                  url: "/login",
                  templateUrl: '/views/login',
                  controller: 'LoginCtrl'                
              })
  
              .state('otherwise', {
                  url: '*path',
                  templateUrl: '/views/404',
                  controller: 'Error404Ctrl'
              });
  
          $locationProvider.html5Mode(true);
  
      }])
  </code></pre>
  
  <p>I have reduced my controller to the following:</p>
  
  <pre><code>appControllers.controller('LoginCtrl', ['$scope', '$modal', function($scope, $modal) {
      $modal.open({templateUrl:'modal.html'});
  }]);
  </code></pre>
  
  <p><strong>Ultimately, what I am hoping to achieve is when login is required not actually GO to the login page, but bring up a dialog.</strong></p>
  
  <p>I have also tried using the <code>onEnter</code> function in the <code>ui-router</code> state method. Couldn't get this working either.</p>
  
  <p>Any ideas?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Ok - so as it turns out, having both ui-bootstrap.js AND ui-bootstrap-tpls breaks this - After reading the docs I thought you needed the templates to work WITH the ui-bootstrap. though it seems all the plunkers only load in the ..tpls file - once I removed the ui-bootstrap file my modal works...Am i blind? or doesn't it not really say which one you need in the docs on github? - </p>
  
  <p>Now i just need to figure out how to prevent my url from actually going to /login, rather than just show the modal :)</p>
  
  <p><strong>update 2</strong></p>
  
  <p>Ok, so by calling $state.go('login') in a service does this for me.</p>