Bootstrap modal popup open and close using angularjs not working

Question

Hi i want to open and close the bootstrap model popup by using angularjs controller.js code.

my controller code

app.controller('RoleViewCtrlq', ['$scope', '$modalInstance', '$modal',
function ($scope, $modalInstance, $modal) {


    $scope.open = function () {
        debugger;
        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
        });


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

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


    }
}
]);

Here i have create the sample https://plnkr.co/edit/xRhCR7qidlr24M8nAOA6?p=preview

it is not working to open and close my pop up in controller.js code. can any one check the issue.??

Answer 1

 <script type="text/ng-template" id="myModalContent.html">

Remove this script tag from HTML and try again. It is working

Answer 2

In the Plunker you have provided, you have not set any myModalContent.html.

When using:

var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html'
});

Angular will check for a myModalContent.html file to include in the modal. It means creating the modal from a template.

After reviewing your code, I think this is not exactly what you are trying to achieve:

Forked your Plunker