AngularJS - Push the newly created child to the main form's children's select

Question

AngularJS - Push the newly created child to the main form's children's select

I have a form with two selects, (1)Parent and (2)Children. Once the Parent item is selected, the Children select options dynamically populate respectively. Currently, both are within the Parent Controller. Next to each select is an add new. When one adds a new parent, a modal appears, a new parent is entered, once submit is click, barring user errors, the db is updated, the modal closes, and the parent controller pushes the new parent item to scope and it is shown in the parent select.

The children select is a problem. It opens a modal of the ChildrenController and while I can add the newly created child to the db, I cannot push it to the main form as the modal closes because the Children select is under the Parent Controller.

How can I push the newly created child to the main form's children's select?

Main Form:

 <div ng-controller="ParentController">
   <div id="ParentDiv">
   <select ng-model="parent" ng-options="parent.Name for parent in parents">
     <option value="" selected>Select Parent ..</option>  
   </select>
   <button class="addNew"  ng-click="openDialog()"><i class="icon-plus"></i> [ add new ]</button>
   </div>

   <div id ="ChildDiv">
  <select ng-model="child" ng-options="child.Name for child in parent.Childs">
     <option value="" selected>Select Child After Parent ..</option>  
   </select>
   <button class="addNew"  ng-click="openDialog()"><i class="icon-plus"></i> [ add new ]</button>
   </div>
 </div>

Blesh found the solution for me in chat: 2 Steps

 function ParentsCtrl($scope, $rootScope, $routeParams, $http, API, $location, $dialog) {

   // Step #1

    $scope.Parent = {};
    $scope.addModel = function (item) {
    $scope.Parent.Childs = $scope.Parent.Childs || [];
    $scope.Parent.Childs.push(item);
};
 .......
}

function ChildrenCtrl($scope, $rootScope, $routeParams, $http, API, $location, $dialog) {

// Step #2

// Create

    var copy = angular.copy($scope.child);
    $http.post('/api/Childs/', copy)
        .success(function () {
            console.log('Copy Name 2: ' + copy.Name);
            $scope.addModel(copy);
        })
        .error(function (data) {
            alert(data);
        });
};
};

}

angularjs

Answer 1

So what we ended up doing was adding a method to the parent controller that could be called from the child controller to perform the add based on what was selected.:

function ParentCtrl($scope) {
   $scope.parentItems = [
        { name: 'foo', children: [] },
        { name: 'bar', children: [] }
        { name: 'test', children: [] }
   ];

   $scope.addChild = function(item) {
      $scope.selectedParent.children.push(item);
   };
}


function ChildCtrl($scope, $http) {
   $scope.doSomething = function () {
       var item = { childName: 'test child' };
        /* TODO: stuff here */
       $scope.addChild(item);
   };
}

<div ng-controller="ParentCtrl">
   <select ng-model="selectedParent" ng-options="x.name for x in parentItems"></select>
   <div ng-controller="ChildCtrl">
      <a ng-click="doSomething()">do something and add child</a>
   </div>
</div>

The idea being that the child controller could call the add function provided by the parent scope.