Modal is coming back undefined in directive <p>Google is giving me the error: "TypeError: Cannot read property 'open' of undefined" in response to my ui-bootstrap module. I've been using other ui-bootsrap directives fine. </p> <p>Am I not declaring the modal dependency correctly?</p> <pre><code>angular.module('ireg').directive('study', function (studyFactory) { return { restrict:'E', scope: { objectid:'@objectid' }, templateUrl: '/ireg/components/study/study.html', link: function (scope, element, attrs, $modal) { scope.openMilestonesDialog = function () { var modalInstance = $modal.open({ animation: $scope.animationsEnabled, templateUrl: '/ireg/components/add-milestones/addMilestonesDialog.html', controller: '/ireg/components/add-milestones/addMilestonesDialogController.js', size: lg }); }; }//end of link } }); angular.module('ireg').controller('addMilestonesDialogController', function ($scope, $modalInstance, studyId) { $scope.ok = function () { $modalInstance.close(); }; }); </code></pre>