Q:

AngularJS: about instantiating the service

I've got a controller:
.controller('myCtrl', function (myService) {
    var that = this;

    that.myService = myService;
});

a service: 
.service('myService', function (DataFactory) {

    var listData = [];

    var mockList = ['aaa','bbb','ccc']; 

    var handleData = function (data) {
        listData = data;
    };

and html:
<button ng-click="myCtrl.myService.handleData()">Go</button>
<div ng-repeat="item in myCtrl.myService.listData>
    {{ item }}
</div>

The thing is: I've got a list which contains data from myService.listData, and (with all code above) it works as expected - by updating list on button click.
I've add: 
that.list = myService.listData 

and changed 
item in myCtrl.myService.listData to item in myCtrl.list 

and the whole thing stopped working.
Could you explain that to me? I feel like I'm missing some really basic stuff and I need the direction to start searching more info.
plunks: 
working one
broken

A:

Here's a working plunker.
Your misconception was that you expect that.myService to be updated when underlying list is populated on click by handleData(). 
However, look at your handleData() implementation:
listData = data;

You don't mutate the initial list, you're pointing to another one (therefore referencing a distinct list) since it acts as a complete re-assignement!
So one way to solve the problem would be to mutate the initial list: 
var handleData = function (data) {
    // populating elements into the initial list
    Array.prototype.push.apply(listData, mockedList); 
};

