title: How to pass back model to callback function on bootstrap modal overlay click
body: <p>Using bootstrap modal with my angular forms. I can pass back models in my cancel/add functions because they are within the scope, but the overlay background div is outside. How do I pass back an object when the overlay is clicked?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="add-contact" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
  
    &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true" data-ng-model="itemInEditMode" data-ng-click="cancelAdd(itemInEditMode)"&gt;×&lt;/button&gt;
      &lt;h3&gt;Add new contact&lt;/h3&gt;
    &lt;/div&gt;
  
    &lt;div class="modal-body"&gt;
  
      &lt;form class="form-horizontal add-inventory-item" ui-if="itemInEditMode != null"&gt;
  
              &lt;div class="left-align-form"&gt;
  
                  &lt;div class="left-field span3"&gt;
                      &lt;label for=""&gt;Full Name&lt;/label&gt;
                      &lt;input type="text" name="" id="" data-ng-model="itemInEditMode.fullName"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="left-field span3"&gt;
                      &lt;label for=""&gt;Position&lt;/label&gt;
                      &lt;input type="text" name="" id="" data-ng-model="itemInEditMode.position"&gt;
                  &lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="left-align-form"&gt;
  
                  &lt;div class="left-field span2"&gt;
                      &lt;label for=""&gt;Phone Number&lt;/label&gt;
                      &lt;input type="text" name="" id="" data-ng-model="itemInEditMode.mainPhoneNumber"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="left-field span2"&gt;
                      &lt;label for=""&gt;Mobile Number&lt;/label&gt;
                      &lt;input type="text" name="" id="" data-ng-model="itemInEditMode.mobilePhoneNumber"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="left-field span2"&gt;
                      &lt;label for=""&gt;Fax Number&lt;/label&gt;
                      &lt;input type="text" name="" id="" data-ng-model="itemInEditMode.faxNumber"&gt;
                  &lt;/div&gt;
                  &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="span3"&gt;
                  &lt;label for=""&gt;Email Address&lt;/label&gt;
                  &lt;input type="text" name="" id="" data-ng-model="itemInEditMode.email"&gt;
              &lt;/div&gt;
              &lt;div class="clear"&gt;&lt;/div&gt;            
  
              &lt;div class="left-align-form checkbox-group"&gt;
  
                  &lt;div class="left-field span1"&gt;
                      &lt;label for=""&gt;Primary Contact&lt;/label&gt;
                      &lt;input type="checkbox" id="" data-ng-model="itemInEditMode.primaryContact" data-ng-checked="itemInEditMode.primaryContact"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="left-field span1"&gt;
                      &lt;label for=""&gt;Event Notifications&lt;/label&gt;
                      &lt;input type="checkbox" name="" id="" data-ng-model="itemInEditMode.eventNotifications"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="left-field span1"&gt;
                      &lt;label for=""&gt;Billing Notifications&lt;/label&gt;
                      &lt;input type="checkbox" name="" id="" data-ng-model="itemInEditMode.billingNotifications"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="left-field span1"&gt;
                      &lt;label for=""&gt;SMS Notifications&lt;/label&gt;
                      &lt;input type="checkbox" name="" id="" data-ng-model="itemInEditMode.smsNotifications"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;/div&gt;            
  
      &lt;/form&gt; 
  
    &lt;/div&gt;&lt;!-- end modal-body --&gt;
  
    &lt;div class="modal-footer"&gt;
      &lt;button class="btn fooda-action-green" data-ng-click="saveContact()" data-dismiss="modal"&gt;&lt;i class="icon-plus-sign"&gt;&lt;/i&gt;Add&lt;/button&gt;
      &lt;button class="btn fooda-action-orange" data-ng-model="itemInEditMode" data-ng-click="cancelAdd(itemInEditMode)" data-dismiss="modal" aria-hidden="true"&gt;&lt;i class="icon-minus-sign"&gt;&lt;/i&gt;Cancel&lt;/button&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;&lt;!-- end add-contact modal --&gt;  
  </code></pre>
  
  <p><strong>jQuery function (for testing)</strong></p>
  
  <pre><code>$('#add-contact').on('hide', function(itemInEditMode) {
      $scope.cancelAdd(itemInEditMode);   
  });
  </code></pre>
  
  <p>Thanks!</p>