Unable to open bootstrap modal window as a route

I'm using bootstrap to display a modal and want it to be shown on click of a anchor tag as a route. But i'm getting a module error & can't seem to figure out how to resolve it.

HTML

<div ng-view>
    <div ng-controller="DetailPageCtrl">
      <a href="#/profile">Click here to open modal!</a>
    </div>
    <script type="text/ng-template" id="modalContainer">
        <div ng-controller="ProfileModalCtrl"></div>
    </script>
</div>

JS

var app = angular.module('plunker', ['ui.bootstrap']);
app.config(function($routeProvider) {
   $routeProvider
      .when('/profile', {
          templateUrl : 'modalContainer',
          controller : 'ProfileModalCtrl'
      });
})
app.controller('DetailPageCtrl', function($scope) {
   console.log("detail page");
});
app.controller('ProfileModalCtrl', function($scope, $modal) {
    $modal.open({templateUrl : 'modal.html'});
});

Code in plnkr : http://plnkr.co/edit/VbvuWzLqkICFzBYI9sL5?p=preview