AngularJS Factory Data Not Updating In Controller - angularjs

Question

I'm not sure what I've done wrong this is how I've setup other factories to share data as far as I can see, but even though the array should be passed by reference and I don't overwrite the array so the reference isn't lost the template never loads with the data I can see coming down from the find all request. Can anyone see what it is that I have/haven't done to get this factory to work and shared between controllers?
I originally set this up not using a service so I know the data returned from the request does work with the view, and if you look at my stubs the data is there (and it looks the same), but the view never updates. If this is something other than a glaring error that I've missed and don't seem to understand I'd appreciate a quick comment as well since I assumed it was the fact objects/arrays are passed by reference that makes this all work.
Contacts Controller
// Stripped down for brevity...
(function () {
'use strict';
function ContactsController(ContactsFactory,
ContactsResource) {
var vm = this;
vm.contacts = ContactsFactory.get();
vm.findAll = function () {
ContactsResource
.all()
.then(function (response) {
ContactsFactory.add(response.contacts); // <-- an array of objects for example: [{id: 5, username: "Richard39", email: "Sanford.Marilyne#Gibson.org",…},…]
});
};
vm.remove = function (contact, index) {
ContactsResource
.remove()
.then(function (response) {
ContactsFactory.remove(index);
});
};
function init() {
vm.findAll();
}
init();
}
ContactsController.$inject = [
'ContactsFactory',
'ContactsResource'
];
angular
.module('app')
.controller('ContactsController', ContactsController);
})();
Contacts Service
// Stripped down for brevity...
(function () {
'use strict';
function ContactsFactory() {
var contacts = [];
function get() {
return contacts;
}
function add(contacts) {
console.log(contacts) // <-- array of objects
angular.forEach(contacts, function(contact) {
console.log(contact) // <-- object
contacts.list.push(contact);
});
console.log(contacts) // <-- objects pushed onto array [Object, Object, Object, Object, Object,…]
// But no update in view, which worked with same resource
// request, prior to switching to factory to share between
// controllers
}
function remove(index) {
contacts.splice(index, 1);
}
// ---
// PUBLIC API.
// ---
return {
get: get,
add: add,
remove: remove
};
}
ContactsFactory.$inject = [];
angular
.module('app')
.factory('ContactsFactory', ContactsFactory);
})();
UPDATE
Using #Rob's suggest makes this work, and I noticed if I added service.contacts as the return value to the getter it also works, and I verified contacts could be removed. So I'm still interested in knowing why this works versus just using an array for contacts like the examples above. Are arrays not passed by reference as I originally thought, and it's only objects? I'd just like to put a name to what I did wrong so it's memorable.
(function () {
'use strict';
function ContactsFactory() {
var service = {
contacts: []
};
function get() {
return service.contacts;
}
function add(contacts) {
angular.forEach(contacts, function(contact) {
service.contacts.push(contact);
});
console.log(contacts);
}
function remove(index) {
contacts.splice(index, 1);
}
return {
contacts: service.contacts, // <-- Rob's suggestion
get: get, // <-- this also works now as well
add: add,
remove: remove
};
}
ContactsFactory.$inject = [];
angular
.module('app')
.factory('ContactsFactory', ContactsFactory);
})();