AngularJs ui.bootstrap - Modal show error [$injector:unpr]
<p>i am trying to use angular <code>ui.bootstrap</code> to implement some functionality like <a href="http://plnkr.co/edit/DgE5eGGmGebQfWunhqqv?p=preview" rel="nofollow">this</a>  but this shows an error</p>

<blockquote>
  <p>[$injector:unpr]
  <a href="http://errors.angularjs.org/1.5.2/" rel="nofollow">http://errors.angularjs.org/1.5.2/</a>$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal%20%3C-%20ngReallyClickDirective</p>
</blockquote>

<p>my code is</p>

<p><strong>app.js</strong></p>

<pre><code>var app = angular.module('app',['ui.router','oc.lazyLoad','ui.bootstrap','ngReallyClickModule']);
</code></pre>

<p><strong>ngReallyClickModule.js</strong></p>

<pre><code>angular.module('ngReallyClickModule',['ui.router'])
    .directive('ngReallyClick', ['$modal',
        function($modal) {

            var ModalInstanceCtrl = function($scope, $modalInstance) {
                $scope.ok = function() {
                    $modalInstance.close();
                };

                $scope.cancel = function() {
                    $modalInstance.dismiss('cancel');
                };
            };

            return {
                restrict: 'A',
                scope:{
                    ngReallyClick:"&amp;",
                    item:"="
                },
                link: function(scope, element, attrs) {
                    element.bind('click', function() {
                        var message = attrs.ngReallyMessage || "Are you sure ?";


                        var modalHtml = '&lt;div class="modal-body"&gt;' + message + '&lt;/div&gt;';
                        modalHtml += '&lt;div class="modal-footer"&gt;&lt;button class="btn btn-primary" ng-click="ok()"&gt;OK&lt;/button&gt;&lt;button class="btn btn-warning" ng-click="cancel()"&gt;Cancel&lt;/button&gt;&lt;/div&gt;';

                        var modalInstance = $modal.open({
                            template: modalHtml,
                            controller: ModalInstanceCtrl
                        });

                        modalInstance.result.then(function() {
                            scope.ngReallyClick({item:scope.item}); 
                        }, function() {
                            //Modal dismissed
                        });


                    });

                }
            }
        }
    ]);
</code></pre>

<p><strong>View</strong></p>

<pre><code>&lt;a ng-really-message="Are you sure ?" ng-really-click="test(item)" item="item" ng-repeat="item in [1,2,3,4,5]"&gt;Delete&lt;/a&gt;
</code></pre>

<p>i want modal dialog on <code>ng-really-click</code> click. And call a function of the current controller on click of the modal  Ok button.  </p>

<p>i am using <code>angular-ui-router</code> and <code>oclazyLoading</code></p>