How do I update one controller with data from another controller with a service in angular?

Question

I have 2 controllers. The first gets the selected item the second gets the available items.

How can I display the new selected item?

The button underneath e

Answer 1

Here's my attempt: fiddle.

I didn't quite understand your data structures, so I changed them a bit. However, I think the important part is there -- how to share the data between the controllers.

function availableItemsCtrl($rootScope, $scope, itemService) {
    $scope.availableItems = [{
        "color": "White",
         ...
    }];
    $scope.updateItem = itemService.storeSelectedItem;
    itemService.storeSelectedItem($scope.availableItems[0]);
}

function selectedItemCtrl($scope, itemService) {
    $scope.selectedItem = itemService.selectedItem;
}

app.service("itemService", function () {
    var that = this;
    this.selectedItem = {};
    this.storeSelectedItem = function (item) {
        angular.copy(item, that.selectedItem);
        console.log('update item', item);
    }
});

It took me a (long) while to figure out that I had to use angular.copy() instead of

that.selectedItem = item;

because the above would cause selectedItem to be assigned a new array reference, which selectedItemCtrl wouldn't notice -- i.e., $scope.selectedItem would still be referencing the previous array.

I will be interested to see what others come up with.

Update: looks like I completely missed the fact that you wanted to support multiple selected items.

Answer 2

Remeber that your $scope is not your model; your $scope is the thing you attach your model to. Angular encourages you to build your own model objects that describe your application's behavior. In this example, it seems you have domain concepts of "available items" and "selected items." Here's a simple service that gives you a model for those concepts:

app.factory('Items', function () {
    var Items = {
        availableItems: [],
        selectedItems: []
    };
    Items.addAvailableItem = function (item) {
        Items.availableItems.push(item);
    };
    Items.selectItem = function (item) {
        Items.selectedItems.push(item);
    };
    return Items;
});

So now you have this Items service, which has an addAvailableItem method, which takes an item and adds it to the availableItems array, and a selectItem method, which takes an item and adds it to the selectedItems array. You can now bind those two arrays to your view using a controller's scope:

app.controller('someController', function ($scope, Items) {
    $scope.availableItems = Items.availableItems;
};

Here's a jsFiddle that demonstrates the concept using the code you provided as a starting point (it also demonstrates a better way to define your controllers in a module): http://jsfiddle.net/BinaryMuse/kV4mK/