title: AngularJS submitting handling a form with multiple inner controllers
body: <p>Good day pals, I have just started with AngularJS and have been having nightmares!</p>
  
  <p>I have the following partial html form included within a parent html using ng-view.</p>
  
  <pre><code> &lt;form name="FormName" ng-submit="addToBasket()" ng-controller="UpdateShoppingBasketCtrl"&gt;
  
          &lt;input type="hidden" name="fieldA" ng-model="fieldA" " value="{{fieldA}}"&gt;
  
          &lt;div  ng-controller="ControllerA"&gt;       
              &lt;input type="text" name="fieldB" ng-model="fieldB" typeahead="stop for stop in stopList | filter:$viewValue | limitTo:8" class="form-control"&gt; 
          &lt;/div&gt; 
  
           &lt;div ng-controller="ControllerB"&gt;      
                    &lt;input type="text"  name="fieldC" class="form-control" datepicker-popup="dd/MM/yyyy" ng-model="fieldC" is-open="opened" min="minDate" max="'22-06-2015'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /&gt;
           &lt;/div&gt; 
  
           &lt;div ng-controller="ControllerC" &gt;      
                  &lt;button type="button" ng-click="populateFieldDDropDown()"&gt; Show Field D  &lt;/button&gt; 
                  &lt;select id="fieldD"
                          name="fieldD"                
                          ng-model="fieldD"
                          ng-options="fieldD as fieldD for fieldD in fieldDList"&gt;
                  &lt;/select&gt;
          &lt;/div&gt;       
  
          &lt;div ng-controller="ControllerD"&gt;
              &lt;input type="text" class="form-control"  name="fieldE" datepicker-popup="dd/MM/yyyy" ng-model="fieldE" is-open="opened" min="minDate" max="'22-06-2015'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
                  &lt;button type="submit"&gt; Add to shopping basket  &lt;/button&gt;  
          &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p><strong>Controller Code</strong></p>
  
  <pre><code>app.controller('UpdateShoppingBasketCtrl', ['$scope', 'ShoppingBasketFactory', '$location',
                                    function ($scope, ShoppingBasketFactory, $location) {
  
      //callback for ng-submit 'createCard':    
      $scope.addToBasket= function () {
  
          alert('NEW PRODUCT DETAILS = 1 '+$scope.fieldA+" 2 "+$scope.fieldB+" 3 "+$scope.fieldC+" 4 "+$scope.fieldD);
  
          //JSON Object is composed here 
          var newProductDetailsJSON = {...........};
  
          ShoppingBasketFactory.create(newProductDetailsJSON,
                  function(data) {
                      //Success Handler
                      $scope.success =true;
                      },
                      function(error) {
                      //Error Handler
                      $scope.success =false;
                      }   
          );
      } 
  }]);
  </code></pre>
  
  <p>The ControllerA is used to handle the typeahead boostrap angularjs plugin.
  The ControllerB is used for the datepicker plugin of boostrap angularjs .
  The ControllerC is used to add a pane to the page when user clicks on the button "Show Field D".
  The ControllerD is used for the datepicker plugin of boostrap angularjs .
  The hidden field fieldA is retrieved from the request when loading the page for the first time.</p>
  
  <p>So, the Controllers A,D,C,D are first invoked as the user completes the ordering form from top to bottom and all the actions work. </p>
  
  <p>The problem is when I submit the whole page by clicking the "Add to shopping basket" submit button, I can only retrieve the hidden field fieldA in my main controller UpdateShoppingBasketCtrl ( I guess this is because its not within a controller). I get undefined variable error for the other fields fieldB,fieldC, fieldD.</p>
  
  <p>I am processing the order form in UpdateShoppingBasketCtrl controller using the $scope.fieldB,$scope.fieldC,$scope.fieldD.</p>
  
  <p>I need to capture all the form fields i.e. all fields within the various nested controllers i.e. A,B,C,D in my main controller and send to a restful webservice as a JSON object.</p>
  
  <p>I honestly thought this would be a no brainer, but there you go again. I come across at least 2 Anularjs Issues per day in my quest to implement a real enterprise rich client with AngularJS.</p>
  
  <p>Any ideas will be appreciated.</p>