Angular js form submit with multiple controller

Question

Hi everyone I have 1 form with multiple controller with multiple md-autocomplete from mongodb and md-datepicker with($watch) for dinamic min,max day in angular-meteor app I have problem with submit form and get the value of md-autocomplete & md-datepicker :

`<form  ng-controller="SubmitCtrl" style="padding-left: 120px;" ng-submit="submit()" name="Form">
<div ng-controller="datesCtrl as vm" ng-form name="DateForm" id="myDatePicker">
    <md-input-content>
        <md-datepicker
        onkeydown="return false"
        name="myDate"
        ng-model="myDate"
        md-hide-icons="all"

        md-current-view="year"
        md-min-date="ctrl.minDate"
        md-max-date="ctrl.maxDate"
        md-open-on-focus="true">
        </md-datepicker>
    </md-input-content>
    {{myDate | date: "yyyy-MM-dd"}}
    </div>
    <div ng-controller="Nationality as vm" class="form-group" ng-form name="NationalityForm">
    <md-input-content  id="myDatePicker">
        <md-autocomplete flex 
       md-input-name="NationalityField"
      ng-model="NationalityField"
      md-input-minlength="3"
     md-no-cache="true"
    md-selected-item="selectedItem"
    md-search-text="searchText"
    md-items="item in vm.getMatches(searchText)"
    md-item-text="item.country_name"

 md-floating-label="Nationality">
<md-item-template>
<span>{{item.country_name}} -</span>
<span 
md-highlight-text="vm.searchText"
md-highlight-flags="^i">{{item.country_code_2_letter}}</span>
</md-item-template>

</md-autocomplete>
<p>country:{{selectedItem.country_name + selectedItem.country_code_2_letter}}</p>
    </md-input-content>

`

my value is available in each controller separately and I can console.log : console.log($scope.selectedItem); and my submit controller is :

angular.module('GntApp')
.controller('SubmitCtrl', ['$scope', function($scope) {
$scope.list = [];
  $scope.submit = function(){


    if ($scope.test) {
      $scope.list.push(this.test);
      console.log($scope.test);
    }
    if ($scope.myDate) {
      $scope.list.push(this.myDate);
      console.log($scope.$parent.myDate);
    }

I know its wrong but as I read I should get value from another controller with parent child but I cannot find good documentation for it I even try angular.element :

$scope.Date = angular.element(myDatePicker);
    console.log($scope.Date); 

but still not working any suggestion or example will save my day .

Answer 1

To do this you can take advantage of prototypical inheritance. Define an object in the parent scope that contains your ng-model variables first; either by defining it in the parent controller or using ng-init. When the variables accessed in the child controllers, they will be searched in their prototype which is the parent scope and no variables will be defined in the child scopes. Another solution (parentVM.var3 in the following code) would be to use parent view model using controller as. This way you don't need to define a new object but you have to add parentVM for each of your variables.

angular.module('app',[]).controller('ParentController', function($scope){
$scope.myObject={};
$scope.logVariables = function(){
  console.log($scope.myObject);
  console.log($scope.parentVM.var3);
}
})
.controller('ChildController1', function(){
})
.controller('ChildController2', function(){
})
.controller('ChildController3', function(){
});

<div ng-app="app">
<div ng-controller="ParentController as parentVM">
  <div ng-controller="ChildController1 as childVM1">
      <input ng-model="myObject.var1">
       <p ng-bind="myObject.var1"></p>
  </div>
  <div ng-controller="ChildController2 as childVM2">
      <input ng-model="myObject.var2">
       <p ng-bind="myObject.var2"></p>
  </div>
  <div ng-controller="ChildController3 as childVM3">
      <input ng-model="parentVM.var3">
       <p ng-bind="parentVM.var3"></p>
  </div>
  
  <p>Access from parent:</p>
  <label>myObject.var1:</label>
  <span ng-bind="myObject.var1"></span>
  <label>myObject.var2:</label>
  <span ng-bind="myObject.var2"></span>
  <label>var3:</label>
  <span ng-bind="parentVM.var3"></span>
  <button ng-click="logVariables()">Log Variables</button>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>