AngularJS open modal dialog on button click

Question

I am trying to do something, that I'm guessing should be fairly easy, but I can't figure it out. All I want to do is open a modal on the click of a button. I'm following this example. http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/displaying-a-modal-dialog.html

Here's my controller:

var app = angular.module("MyApp", ["ui.bootstrap.modal"]);

app.controller('MyCtrl', function ($scope) {
$scope.open = function () {
    $scope.showModal = true;
};

$scope.ok = function () {
    $scope.showModal = false;
};

$scope.cancel = function () {
    $scope.showModal = false;
};
});

Here's my view:

<button class="btn" ng-click="open()">Open Modal</button>

<div modal="showModal" close="cancel()">
    <div class="modal-header">
        <h4>Modal Dialog</h4>
    </div>
    <div class="modal-body">
        <p>Example paragraph with some text.</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-success" ng-click="ok()">Okay</button>
        <button class="btn" ng-click="cancel()">Cancel</button>
    </div>
</div>

I'm getting the error message Error: [ng:areq] Argument 'MyCtrl' is not a function, got undefined. And the modal shows on the page when it loads. Thanks in advance.

Solution

On your first line, you use "modal=" . It is a directive, you need to implement it in you code. (See here : AngularJS reusable modal bootstrap directive )

For the problem " Argument 'MyCtrl' is not a function, got undefined", it is a dependency problem I think. A similar problem here : Angularjs: Error: [ng:areq] Argument 'HomeController' is not a function, got undefined

If you want implement a modal dialogbox, I advice you to see the official Bootstrap-Angular Doc here : https://angular-ui.github.io/bootstrap/