Binding to the same array in a different section - angularjs

Question

I have the following plnkr (although it doesn't display the data):
http://plnkr.co/edit/7jAzOftz9Yq6hXNts9kf?p=preview
I have 2 div sections:
<div ng-controller="AddChoreController as chores">
<div class="row clearfix" ng-controller="AddChoreController as chores">
What I'm trying to do is to build an array in 1 section and then reuse the array in a different section. I get that I'm just instantiating the same controller, my question is how when I update the choreList.chores array can I show it in the second div section?

Answer 1

You should use a service to share across your app / controllers. I included a snippet below to demonstrate how you might do this.
var app = angular.module('app', []);
app.controller('myController1', function($scope, myService) {
$scope.myService = myService;
});
app.controller('myController2', function($scope, myService) {
$scope.myService = myService;
});
app.service('myService', function() {
this.arr = [];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app'>
<div ng-controller='myController1'>
myController1 #1
<input ng-model="myService.arr"/>
{{ myService.arr }}
</div>
<div ng-controller='myController1'>
myController1 #2
<input ng-model="myService.arr"/>
{{ myService.arr }}
</div>
<div ng-controller='myController2'>
myController2
<input ng-model="myService.arr"/>
{{ myService.arr }}
</div>
<div>