Using same controller in two places in AngularJS
<p>I am working on an Ionic app, screen has lists with checkboxes and option to select all. I am new to AngularJS and Ionic.</p>

<p>"Select All" works fine when using controller in parent element where Select all and other lists reside.</p>

<p>I want to move the Select All to sub-header so that "Select All" will be always visible when we scroll through.</p>

<p>I tried to use the same controller in both places but Select All didn't work, I just read the scope gets changed and the value won't get passed.</p>

<p>Is there any way to pass the changes or any other way to fix this?</p>

<p>And data will be populated from the services.</p>

<p><strong>HTML</strong></p>

<pre><code> &lt;ion-header-bar class="bar-light bar-subheader"&gt;
   &lt;div ng-controller="MainCtrl"&gt;
      &lt;ion-checkbox ng-model="selectAll" ng-click="checkAll()" &gt;
          &lt;p&gt;Select All&lt;/p&gt;
      &lt;/ion-checkbox&gt;
    &lt;/div&gt;
&lt;/ion-header-bar&gt;
&lt;ion-content class="has-header"&gt;
  &lt;div class="list" ng-controller="MainCtrl"&gt;    
    &lt;ion-checkbox ng-repeat="item in devList" ng-model="item.checked"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col"&gt;
          &lt;p&gt;{{ item.text }} - 99&lt;/p&gt;
          &lt;p&gt;{{ item.text }} - 99&lt;/p&gt;
        &lt;/div&gt;
         &lt;div class="col right"&gt;
          &lt;p&gt;{{ item.text }} - 99&lt;/p&gt;
           &lt;p&gt;{{ item.text }} - 99&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/ion-checkbox&gt;
  &lt;/div&gt;
&lt;/ion-content&gt;  
</code></pre>

<p><strong>JS</strong></p>

<pre><code>.controller('MainCtrl', function($scope) {
  $scope.devList = [
    { text: "HTML5", checked: true },
    { text: "CSS3", checked: false },
    { text: "JavaScript", checked: false }
  ];

   $scope.checkAll = function() {    
        if ($scope.selectAll) {
            $scope.selectAll = true;
        } else {
            $scope.selectAll = false;
        }
        angular.forEach($scope.devList, function (item) {
            item.checked = $scope.selectAll;
        });
    };
});
</code></pre>

<p><a href="http://codepen.io/shankhar/pen/eZQBOe" rel="noreferrer">CodePen link</a></p>