$ uibModal.open () is not a function

Question

I am trying to integrate a modular form of Angular bootstrap,

Here is my controller

angular.module('app').controller('groupController',['groupService','$uibModal','toastr','$scope',function(groupService,toastr,$uibModal,$scope) 

I added $ uibModal as a dependency. In my app.js, I added ui.bootstrap as a dependency too,

My version of angular.bootstrap 1.3.3

my modal function is as follows

 vm.viewGroupDetail = function(userDetails) { var scope = $scope.$new(); scope.userDetails = userDetails; vm.modalInstance = $uibModal.open({ animation: true, templateUrl: 'app/views/groups/group_details_modal.html', windowClass: 'd-modal', size: 'md', scope: scope // resolve: { // userDetails: function () { // return ; // } // } }); }; 

When I try to use breakpoints and check the control flow, it enters the viewGroupDetail function. but at the point $ uibModal.open () control is interrupted

What am I missing here? I tried other related issues in the stack overflow, nothing gave me a solution, so sending my own request

Answer 1

You are sending $uibModal in the wrong place in the parameter declaration

 'groupService','$uibModal','toastr','$scope',function(groupService,toastr,$uibModal,$scope) 

The order must be maintained in accordance with the injection.

try it

 'groupService','$uibModal','toastr','$scope',function(groupService,$uibModal,toastr,$scope)