title: AngularJS Modal Popup
body: <p>I'm really new to Angular.  I'm trying to recreate the modal sample at this link <a href="https://angular-ui.github.io/bootstrap/">https://angular-ui.github.io/bootstrap/</a>  I am having no luck with it!  I created a plunker <a href="http://plnkr.co/edit/018Ed7RG3Y0GoAlK7a14?p=catalogue">http://plnkr.co/edit/018Ed7RG3Y0GoAlK7a14?p=catalogue</a> I just need to be able to open a modal on a button click.  I'm getting the error message Error: [ng:areq] Argument 'ModalDemoCtrl' is not a function, got undefined</p>
  
  <p>Here's my view</p>
  
  <pre><code>&lt;div ng-controller="ModalDemoCtrl"&gt;
  &lt;script type="text/ng-template" id="myModalContent.html"&gt;
      &lt;div class="modal-header"&gt;
          &lt;h3 class="modal-title"&gt;I'm a modal!&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;ul&gt;
              &lt;li ng-repeat="item in items"&gt;
                  &lt;a href="#" ng-click="$event.preventDefault(); selected.item = item"&gt;{{ item }}&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          Selected: &lt;b&gt;{{ selected.item }}&lt;/b&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button class="btn btn-primary" type="button" ng-click="ok()"&gt;OK&lt;/button&gt;
          &lt;button class="btn btn-warning" type="button" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  &lt;button type="button" class="btn btn-default" ng-click="open()"&gt;Open me!&lt;/button&gt;
  &lt;button type="button" class="btn btn-default" ng-click="open('lg')"&gt;Large modal&lt;/button&gt;
  &lt;button type="button" class="btn btn-default" ng-click="open('sm')"&gt;Small modal&lt;/button&gt;
  &lt;button type="button" class="btn btn-default" ng-click="toggleAnimation()"&gt;Toggle Animation ({{ animationsEnabled }})&lt;/button&gt;
  &lt;div ng-show="selected"&gt;Selection from a modal: {{ selected }}&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here's my controller:</p>
  
  <pre><code>angular.module('crm.ma', ['ngAnimate', 'ui.bootstrap']);
  angular.module('crm.ma').controller('ModalDemoCtrl', ModalDemoCtrl, function ($scope, $uibModal, $log) {
  
  $scope.items = ['item1', 'item2', 'item3'];
  
  $scope.animationsEnabled = true;
  
  $scope.open = function (size) {
  
      var modalInstance = $uibModal.open({
          animation: $scope.animationsEnabled,
          templateUrl: 'myModalContent.html',
          controller: 'ModalInstanceCtrl',
          size: size,
          resolve: {
              items: function () {
                  return $scope.items;
              }
          }
      });
  
      modalInstance.result.then(function (selectedItem) {
          $scope.selected = selectedItem;
      }, function () {
          $log.info('Modal dismissed at: ' + new Date());
      });
  };
  
  $scope.toggleAnimation = function () {
      $scope.animationsEnabled = !$scope.animationsEnabled;
  };
  </code></pre>
  
  <p>});</p>
  
  <pre><code>angular.module('crm.ma').controller('ModalInstanceCtrl', ModalInstanceCtrl, function ($scope, $modalInstance, items) {
  
  $scope.items = items;
  $scope.selected = {
      item: $scope.items[0]
  };
  
  $scope.ok = function () {
      $modalInstance.close($scope.selected.item);
  };
  
  $scope.cancel = function () {
      $modalInstance.dismiss('cancel');
  };
  });
  </code></pre>