$uibModal.open() is not a function

Question

I am trying to integrate Angular bootstrap modal form,

Here is my controller

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

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

My angular.bootstrap version is 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 using breakpoints and check the control flow, It goes inside viewGroupDetail function. but at the point of $uibModal.open() , the control breaks

What am i missing here? I tried other related questions in stack overflow, nothing gave me a solution, so posting my own Query

Answer 1

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

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

Order must be maintained according to inject.

Try like this

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