angularjs - Angular [$injector:unpr] Unknown provider with customize directive -

i have little issue using customize directive within template field of ui-bootstrap modal directive.

my aim send data modal via resolve attribute , re-use these resolved parameters inside controller of own directive.

var app = angular.module('app', ['ui.bootstrap']);  app.controller('myctrl', ['$scope', '$modal', function($scope, $modal) {   $scope.openmodal = function () {     var popup = $modal.open({             template: '<my-modal></my-modal>',             resolve : {                 mydata : function() {                     return 42;                 }             }         });   }; }]);  app.controller('modalcontroller', ['$scope', 'mydata', function($scope, mydata) {   //the error in directive controller   $scope.mydata = mydata; }]);  app.directive('mymodal', function() {   return {     restrict: 'e',     templateurl : 'mymodal.html',     controller : 'modalcontroller',     replace: true   }; }); 

maybe proceed in wrong way.

any suggest make code functionnal ?

http://plnkr.co/edit/rnd2jju79aoflfqgngn8?p=preview

the resolve parameters injected controller defined in $modal.open config parameters, want inject directive controller. not work. imagine use mymodal directive somewhere else, there wouldn't mydata object used.

but don't realy see, need directive for. go easier way:

app.controller('myctrl', ['$scope', '$modal',   function($scope, $modal) {     $scope.openmodal = function() {       var popup = $modal.open({         templateurl: 'mymodal.html',         controller: 'modalcontroller',         resolve: {           mydata: function() {             return 42;           }         }       });     };   } ]);  // here mydata of resolves injected! app.controller('modalcontroller', ['$scope', 'mydata',   function($scope, mydata) {     $scope.mydata = mydata   } ]); 

plunker: http://plnkr.co/edit/bihiwrjkufb4ouy9wn8w?p=preview