title: AngularJS model won't update immediately if it is changed in a jQuery delegated event handler
body: <p>I have set up a jsfiddle for my problem <a href="http://jsfiddle.net/limdauto/bNbKk/2/" rel="nofollow">here</a>. Basically I'm trying to let user generate HTML radio group by dynamically constructing a table of options associated with this group. I then store all of these options in an Angular model called <code>$scope.options</code>, which is an array. Every single time a new row is added to the options table, a new option object is pushed into the options array. Pretty simple, really.</p>
  
  <p>The problem is my <code>$scope.options</code> model is not updated immediately after the event handler terminates. Instead, it's only updated when another event is triggered. To demonstrate, please head over to my fiddle and add 2 options to the table. You will see that the number of options doesn't change after you add option 1 but changes when you begin adding option 2.</p>
  
  <pre><code>// add option to the table
  $("#table-radio-options").on("click", "button.btn-confirm-option", function (event) {
      var $tr = $(this).closest("tr");
      var $optionText = $tr.find(".option-text").first();
      var $optionValue = $tr.find(".option-value").first();
      // add to the list of options in this scope
      $scope.options.push({
          text: $optionText.val(),
          value: $optionValue.val()
      });
      // change the form into table row with data value
      $optionText.replaceWith("&lt;span&gt;{0}&lt;/span&gt;".format($optionText.val()));
      $optionValue.replaceWith("&lt;span&gt;{0}&lt;/span&gt;".format($optionValue.val()));
      // remove the confirm 
      $(this).remove();
  });
  </code></pre>
  
  <p>};</p>