title: Closing Twitter Bootstrap Modal From Angular Controller
body: <p>I have a modal window that I use to present a form to users.  They enter the information and then press a button the has an ng-click.  The server processes the request and sends back a response.  When the response is success I want to close the modal window from the controller.  How can this be achieved?</p>
  
  <p>The modal is a partial included in another page</p>
  
  <p>Main page:</p>
  
  <pre><code>&lt;!-- main content --&gt;
  &lt;p&gt;Foo&lt;/p&gt;
  &lt;!-- angular directive --&gt;
  &lt;foo-directive&gt;&lt;/foo-directive&gt;
  </code></pre>
  
  <p>Content of that directive:</p>
  
  <pre><code>&lt;div ng-controller="FooCtrl"&gt;
      &lt;ul class="thumbnails"&gt;
          &lt;li class="span3 tile tile-white" ng-repeat="foo in model.foo"&gt;
              &lt;div&gt;
                  {{foo.bar}}
              &lt;/div&gt;
              &lt;div&gt;
                  ({{foo.bam}})
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;a data-toggle="modal" href="#myModal"&gt;&lt;img src="{{foo.imgPath}}"&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;!-- foo modal partial included by ejs --&gt;
      &lt;% include foo_modal.ejs %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Modal markup:</p>
  
  <pre><code>&lt;div id="fooModal" class="modal hide fade in" style="display: none; "&gt;
      &lt;div class="modal-header"&gt;
          &lt;a class="close" data-dismiss="modal"&gt;×&lt;/a&gt;
          &lt;h3&gt;New Device&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;h4&gt;Foo Modal&lt;/h4&gt;
          &lt;div ng-controller="FooCtrl"&gt;
              &lt;form name="fooFrm"&gt;
                  &lt;input id="email" type="email" class="input-medium" ng-model="fooEmail"
                         placeholder="Email"&gt;
                  &lt;button class="btn btn-primary btn-small"
                          ng-click="doFoo({email:fooEmail})"&gt;Email Link&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;a href="#" class="btn" data-dismiss="modal"&gt;Close&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Controller code:</p>
  
  <pre><code>functionFooCtrl($scope, FooService) {
  
  
      $scope.doFoo= function (email) {
         FooService.save({email:email.fooEmail}) {
              alert('Request successful');
              //TODO close Twitter bootstrap modal named fooModal here
          },
              function (err) {
                  alert('Your request bonked, sorry');
                  //TODO close twitter bootstrap modal named fooModal here
              });
          }
      };
  </code></pre>
  
  <p>What is the right way to close the modal from the controller in the success and error functions?</p>
  
  <p>Thanks in advance,</p>