title: Angular JS propagate child scope variable changes to parent scope
body: <p>How can I take variable changes and easily propagate them back to the ParentCtrl despite a 'new' var being instantiated in the ChildCtrl? Extra points for minimal to no $on's and $watch's (makes it easier to implement)</p>
  
  <p>ParentCtrl</p>
  
  <ul>
  <li><p>ChildCtrl / ChildCtrl2 / ChildCtrl3 / ChildCtrl4</p>
  
  <ul>
  <li>View</li>
  </ul></li>
  </ul>
  
  <p>My ChildCtrl's are just different enough where I can't easily abstract a master layout and a ng-view, but they all depend on the same functions in ParentCtrl.</p>
  
  <p>$scope.searchTerms is defined in ParentCtrl but the input box with ng-model='searchTerms' is in the view of the child controllers.  When this var changes it's not reflected in the ParentCtrl only the ChildCtrls.  </p>
  
  <p>Example:
  <a href="http://jsfiddle.net/JHwxP/22/">http://jsfiddle.net/JHwxP/22/</a></p>
  
  <p>HTML Partial</p>
  
  <pre><code>&lt;div ng-app&gt;
      &lt;div ng-controller="Parent"&gt;
          parentX = {{x}} &lt;br/&gt;
          parentY = {{y}}&lt;br/&gt;
          &lt;div ng-controller="Child"&gt;
              childX = {{x}}&lt;br/&gt;
              childY = {{y}}&lt;br/&gt;
              &lt;a ng-click="modifyBothScopes()"&gt;modifyBothScopes&lt;/a&gt;&lt;br&gt;
              &lt;br&gt;
              The changes here need to appear in 'Parent'. &lt;input ng-model='y'&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Controllers</p>
  
  <pre><code>function Parent($scope) {
      $scope.x= 5;
      $scope.y= 5;
  }
  
  function Child($scope) {
      $scope.modifyBothScopes= function() {
         $scope.$parent.x++;
      };  
  }
  </code></pre>
  
  <p>UPDATE</p>
  
  <p>I'm currently attempting a shared service approach: <a href="https://gist.github.com/exclsr/3595424">https://gist.github.com/exclsr/3595424</a></p>
  
  <p>UPDATE</p>
  
  <p>Trying an emit/broadcast system</p>
  
  <p>SOLVED
  Problem:
  I was storing $scope.searchTerms in the parent and when changed created a space in the child $scope. </p>
  
  <p>Solution:
  I should have done $scope.search.terms in the parent and when changed in the child it would bubble up to the parent.</p>
  
  <p>Example: <a href="http://jsfiddle.net/JHwxP/23/">http://jsfiddle.net/JHwxP/23/</a></p>