Example of an AngularJS directive that will dynamically change the destination page of a NationBuilder signup form.

dynamic_signup_page.html

<div nb-dynamic-page page-id="dynamicPage">

  {% form_for signup %}

    <input ng-model="dynamicPage" type="text" value="122" name="pageId" />

	  {% submit_tag "Do this action", class:"submit-button" %}

  {% endform_for %}

</div>

nb_dynamic_page.js

angular.module('NBdynamic')
  .directive('nbDynamicPage', function NBDynamicPageDirective() {
    return {
      restrict: 'A',
      controller: ['$scope', '$element', '$timeout', NBDynamicPageController],
      scope: {
        pageId: '='
      },
    }
  })

/**
 * Watches $scope.pageId and updates
 */
function NBDynamicPageController($scope, $element, $timeout) {
  setDestinationPage($scope.pageId);

  // Update the destination if the action updates
  $scope.$watch('pageId', function() {
    setDestinationPage($scope.pageId);
  });

  // Sets the destination page for this action. Only sets it if
  // action is present
  function setDestinationPage(page_id) {
    if (page_id) {
      // Timeout to give the DOM a chance to render so the
      // input element can be found
      $timeout(function() {
        // Find the hidden form element, update it’s value
        $element.find("input[name='page_id']").attr('value', page_id);
      }, 0);
    }
  }
}