title: How to open modal window on button click in AngularJS
body: <p>I can not figure out how to get a ui.bootstrap modal window to work with AngularJS. I'm getting the error messagse: Error: [$injector:unpr] Unknown provider: $modalProvider &lt;- $modal &lt;- AdvancedSearchCtrl</p>
  
  <p>Here's the code:</p>
  
  <pre><code>(function () {
  
  
  angular.module('crm.ma')
      .controller('AdvancedSearchCtrl', function ($modal) {
      var vm = this;
  
      vm.openModal = function () {
  
          var modalInstance = $modal.open({
              templateUrl: 'app/components/common/advancedSearchModal.html',
              controller: advancedSearchInstanceCtrl
          });
  
      };
  
      });
  
  angular.module('crm.ma').controller('advancedSearchInstanceCtrl', function ($modalInstance) {
  
      var modal = this;        
  
      modal.cancel = function () {
          $modalInstance.close();
      };
  
  });
  })();
  
  
  &lt;div class="row"&gt;
  &lt;button ng-click="vm.openModal()"&gt;Add User&lt;/button&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;script type="text/ng-template" id="advancedSearchModal.html"&gt;
  &lt;div class="modal-header"&gt;
      &lt;h3&gt;Text for header&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
      Text for body
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
      &lt;button type="submit"&gt;Search&lt;/button&gt;
      &lt;button class="btn btn-warning" ng-click="modal.cancel()"&gt;Cancel&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>My module code:</p>
  
  <pre><code>(function () {
  'use strict';
  var app = angular
      .module('crm.ma',
          [
              'ui.router',
              'ui.bootstrap',
              'angularUtils.directives.dirPagination',
              'toastr',
              'crm.ma.common',
          ]);
   })();
  </code></pre>