Nested views with shared data

coded for this SO question: http://stackoverflow.com/questions/30176398/updating-scope-with-multiple-templates-with-same-controller

by awolf2904

HTML

<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 ui-view="choicesheader"></div>
<div id="pageContent">
    <div ui-view="main"></div>
</div>

JavaScript

angular.module('myApp', ['ui.router'])
    .controller('cloud', function ($scope, $state, cloudService) {
        // console.log('cloud router run', $scope); 
        // cloud runs twice --> different scopes (see $id of console.log)
        
        $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) {
    //
    // For any unmatched url, redirect to /state1
    $urlRouterProvider.otherwise("/cloud");
    //
    // Now set up the states
    $stateProvider.state('cloud', {
        url: '/cloud',
        views: { 
            'main': {
                templateUrl: 'partials/cloud.html', controller: 'cloud' 
            },
            'choicesheader': { 
                templateUrl: 'partials/choices_header.html', 
                controller: 'cloud' 
            }
        }
    });
});