title: Angularjs – Warn on unsaved changes in Master Detail Scenario
body: <p>I need a solution to warning about unsaved changes in a Master- Detail scenario.  I was able to implement a solution by Sam that he created in September 2015 (<a href="http://www.samjhill.com/blog/?p=525#comment-28558" rel="nofollow noreferrer">http://www.samjhill.com/blog/?p=525#comment-28558</a>).   This was in response to a stackoverflow question and answer at the link, <a href="https://stackoverflow.com/questions/14852802/detect-unsaved-changes-and-alert-user-using-angularjs">Detect Unsaved changes and alert user using angularjs</a>.</p>
  
  <p>The solution provided by Sam works great with a single form in the html file but I am having problems in a situation I have where I have multiple forms in a header section and detail section where both can change.  In the detail section I am using xeditable table.   I have tried adding the  "confirm-on-exit" attribute to both forms.   In the top section the confirmation box comes up as expected but continues to come up even after I submit for update.   In the xeditable section the confirmation box never comes up.   I have included my html below.  Can you offer any suggests I can make so that the warning comes up if a change is made to any form on the page?</p>
  
  <pre><code>.container.col-md-12.col-sm-12.col-xs-12-center
      .well
          form.form-horizontal(name="createQuestionAnswer" confirm-on-exit)
              fieldset
                  legend Question Definition
                  .form-group
                      label.col-md-2.control-label(for="statement") Question
                      .col-md-10
                          input.form-control(name="statement", type="text", placeholder="Statement", ng-model="statement", ng-change = "changeStatement()",required)
                  .form-group
                      label.col-md-2.control-label(for="sequenceNo") SequenceNo
                      .col-md-4
                          input.form-control(name="sequenceNo", type="text", placeholder="SequenceNo", ng-model="sequenceNo", ng-change = "changeSequenceNo()",required)
                      label.col-md-2.control-label(for="componentType") Type
                      .col-md-4
                          input.form-control(name="componentType", type="text", placeholder="ComponentType", ng-model="componentType", ng-change = "changeComponentType()",required)
                  .form-group
                      label.col-md-2.control-label(for="weight") Weight
                      .col-md-2
                          input.form-control(name="weight", type="text", placeholder="Weight", ng-model="weight", ng-change = "changeWeight()")
                      label.col-md-2.control-label(for="imageURL") Image
                      .col-md-6
                          input.form-control(name="imageURL", type="text", placeholder="Image", ng-model="imageURL", ng-change = "changeImageURL()", required)
      div(ng-app='app')
              table.table.table-bordered.table-hover.table-condensed(style='width: 100%')
                  tr(style='font-weight: bold')
                      td(style='width:70%') Answer
                      td(style='width:10%') Correct
                      td(style='width:10%') Rank
                      td(style='width:10%') Position
                  tr(ng-repeat='answer in answers')
                      td
                          // editable answer (text with validation)
                          span(editable-text='answer.answer',  e-name='answer', e-form='rowform', onbeforesave='checkAnswer($data)',onaftersave='saveAnswers($data)', e-required='') {{ answer.answer || &amp;apos;empty&amp;apos;}}
                      td
                          // editable  (select-local)
                          span(editable-text='answer.correct', e-name='correct', e-form='rowform') {{ answer.correct }}
                      td
                          // editable
                          span(editable-text='answer.rank', e-name='rank', e-form='rowform' ) {{ answer.rank }}
                      td
                          // editable
                          span(editable-text='answer.position', e-name='position', e-form='rowform') {{ answer.position }}
                      td(style='white-space: nowrap')
                          // form
                          form.form-buttons.form-inline(editable-form='', name='rowform' onbeforesave='changeAnswers()', ng-show='rowform.$visible', shown='inserted == answer')
                              button.btn.btn-primary(type='submit', ng-disabled='rowform.$waiting') save
                              button.btn.btn-default(type='button', ng-disabled='rowform.$waiting', ng-click='rowform.$cancel()') cancel
                          .buttons(ng-show='!rowform.$visible')
                              button.btn.btn-primary(ng-click='rowform.$show()' ) edit
                              button.btn.btn-danger(ng-click='removeAnswer($index)') del
              button.btn.btn-default(ng-click='addAnswer()') Add row
  form.form-horizontal(name="buttonQuestionAnswer")
      fieldset
          .form-group
              .col-md-10.col-md-offset-2
                  .pull-right
                      button.btn.btn-primary(ng-controller="flQuestionCrudCtrl", ng-show="questionMode=='Create'",  ng-click="createQuestion()") Save New
                      | &amp;nbsp;
                      button.btn.btn-primary(ng-controller="flQuestionCrudCtrl", ng-show="questionMode=='Update'", ng-click="updateQuestion()") Update
                      | &amp;nbsp;
                      button.btn.btn-primary(ng-controller="flQuestionCrudCtrl", ng-show="questionMode=='Update'", ng-click="deleteQuestion()") Delete
                      | &amp;nbsp;
                      a.btn.btn-default(ui-sref="home") Cancel
  </code></pre>