title: AngularJS open modal dialog on button click
body: <p>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.  <a href="http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/displaying-a-modal-dialog.html" rel="nofollow">http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/displaying-a-modal-dialog.html</a></p>
  
  <p>Here's my controller:</p>
  
  <pre><code>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;
  };
  });
  </code></pre>
  
  <p>Here's my view:</p>
  
  <pre><code>&lt;button class="btn" ng-click="open()"&gt;Open Modal&lt;/button&gt;
  
  &lt;div modal="showModal" close="cancel()"&gt;
      &lt;div class="modal-header"&gt;
          &lt;h4&gt;Modal Dialog&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;p&gt;Example paragraph with some text.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button class="btn btn-success" ng-click="ok()"&gt;Okay&lt;/button&gt;
          &lt;button class="btn" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>