angularjs 2way binding between service and controller with an array
<p>Before I start, I will <a href="http://codepen.io/r3plica/pen/XdJdjd?editors=1010" rel="nofollow">link my codepen</a> so you can have a look before reading this :)</p>

<p>I have made a very simple app to demonstrate my issue.
basically when I have multiple services sharing an array, it appears that angularjs treats the array as a primitive object which is odd.
I have to link code, so this is my controller and 2 services at the start:</p>

<pre><code>angular.module('bindingApp', [])

.controller('MainController', ['MainService', 'SelectionsService', function (service, selections) {

  // Map the controller to a variable
  var self = this;

  // Attach the model to our scope
  self.models = service.models;

  // Create a function that handles the changes the service in some way
  self.updateSelectedItems = function () {

    // Get our first item
    var models = selections.selected;

    // Loop through our selected items
    for(var i = 0; i &lt; models.length; i++) {

      // Get our current model
      var model = models[i];

      // Change the properties
      model.status = 'Cancelled';
      model.colour = 'gray';
    }
  };

  // Reset everything
  self.reset = function () {
    selections.reset();
    service.reset();

    console.log('models in the controller', self.models);
  }

  // Map our function to our service function
  self.selectItem = selections.select;

  // Initialize our service
  service.init();
}])

.service('MainService', function () {

  // Create our service
  var service = {

    // Create the default model (empty array)
    models: [],

    // Populates our model
    init: function () {

      // Loop from 1 to 10
      for(var i = 0; i &lt; 10; i++){

        // Create some object
        var model = {
          status: 'Live',
          colour: 'green',
          selected: false
        };

        // Push our model to our array
        service.models.push(model);
      }

      console.log('models in the service', service.models);
    },

    // Resets everything
    reset: function () {

      // Reset our array
      service.models = [];

      // Initialize
      service.init();
    }
  };

  // Return our service
  return service;
})

.service('SelectionsService', function () {

  // Create our service
  var service = {

    // Create a reference to our selected objects
    selected: [],

    // Our select function
    select: function (e, item) {

      // Create a reference to our selected items
      var selected = service.selected;

      // Update the selected status
      item.selected = true;

      // Push our item to our selected items
      selected.push(item);

      // Stop propagation
      e.stopPropagation();
      e.preventDefault();
    },

    // Resets our selected items
    reset: function () {
      service.selected = [];
    }    
  };

  // Return our service
  return service;
});
</code></pre>

<p>I have created 2 more Codepens to try to fix the issue. The first one maps the items to an object encapsulating an array in the <strong>MainController</strong>. The second one does the same, but also the <strong>MainService</strong> has an object encapsulating the array.</p>

<p>Does anyone know what I can do to get this simple pen working?</p>