javascript - Updating $scope with multiple templates with same controller -

i have following route:

.state('cloud', {     url: '/cloud',     views: {          'main': { templateurl: 'pages/templates/cloud.html', controller: 'cloud' },         'choices-header': { templateurl: 'pages/templates/views/choices-header.html', controller: 'cloud' }     } }) 

i because need choices-header template go different view main template.

#options_header in choices-header template supposed show if $scope.cloud_selected_items has items in it.

but reason, when item added array, doesn't know this, element doesn't show. if reload page item in array, show. know code working.

does know need cloudcheck() function scope updates , template see's change in $scope?

so in index page, have:

<div ui-view="choices-header"></div> <div id="pagecontent">     <div ui-view="main"></div> </div> 

---

cloud.html

<div ng-repeat="data in items">    <div ng-click="cloudcheck(data.id)">click me</div> </div> 

---

choices_header.html

<div id="option-header" ng-show="cloud_selected_items.length > 0">     {{ cloud_selected_items.length }} selected </div> 

---

javascript

.controller('cloud', function($scope, $rootscope, $http, $state, $stateparams) {     $scope.cloud_selected_items = [];      $scope.cloudcheck = function(id) {         $scope.cloud_selected_items.push(id);     } } 

i think problem code scope not shared in views. scope inherited in nested views you're having 2 separate views.

if console.log($scope) you'll see cloud controller run twice different scopes. can see scopes different scope property $id.

you can use service keeps track of selected items. two-way binding update header view expected.

please see code below (not working here, cookie issue ui-router on so) , here working demo @ jsfiddle.

angular.module('myapp', ['ui.router'])      .controller('cloud', function ($scope, $state, cloudservice) {          $scope.items = [{              id: 1,              data: 'test1'          },          {              id: 2,              data: 'test2'          },          {              id: 2,              data: 'test2'          }]; //dummy data          $scope.cloud_selected_items = cloudservice.getitems();                    $scope.cloudcheck = cloudservice.cloudcheck;          /*function(item) {              console.log(id);              $scope.cloud_selected_items.push(item);          };*/  })  .factory('cloudservice', function() {      var cloudselecteditems = [];            var cloudservice = {          cloudcheck: function(item) {              cloudselecteditems.push(item);          },          getitems: function() {              return cloudselecteditems;          }      };            return cloudservice;  })  .config(function ($stateprovider, $urlrouterprovider) {      //      // unmatched url, redirect /state1      $urlrouterprovider.otherwise("/cloud");      //      // set states      $stateprovider.state('cloud', {          url: '/cloud',          views: {               'main': {                  templateurl: 'partials/cloud.html', controller: 'cloud'               },              'choicesheader': {                   templateurl: 'partials/choices_header.html',                   controller: 'cloud'               }          }      });  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.min.js"></script>    <script type="text/ng-template" id="partials/choices_header.html">      <div id="option-header" ng-show="cloud_selected_items.length > 0">      {{ cloud_selected_items.length }} selected  </div>  </script>    <script type="text/ng-template" id="partials/cloud.html">      <div ng-repeat="data in items">          <button ng-click="cloudcheck(data.id)">click me</button>      </div>  </script>    <div ng-app="myapp">    <div ui-view="choicesheader"></div>    <div id="pagecontent">      <div ui-view="main"></div>    </div>  </div>