json - 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 each available item has a ng-click that calls a service called updateItem where I would like the update to happen.

I have been working on this for awhile any help is much appreciated. -Thanks

jsfiddle

<div ng-controller="seletedItemCtrl">
      <p><i>I want to update this item</i></p>
      <div ng-repeat="item in selectedItems">

      <ul>
          <li>{{item.color}}</li>
          <li>{{item.Distance}}</li>
          <li>{{item.height}}</li>
          <li>{{item.name}}</li>
          <li>{{item.year}}</li>
      </ul>
   </div>
</div >   
  ///////////////////////////////////////////////////
  <div ng-controller="availableItemsCtrl">
       <div ng-repeat="item in availableItems">
          <ul>
              <li>{{item.color}}</li> 
              <li>{{item.Distance}}</li>
              <li>{{item.height}}</li>
              <li>{{item.name}}</li>
              <li>{{item.year}}</li>
         </ul>
         <button ng-click = 'updateItem()' >select item</button>
      </div> 
   </div>

JS

var app = angular.module('myApp', []);

function availableItemsCtrl($rootScope, $scope){
        $scope.availableItems =  {
    "Items": {
        "Item": {
            "Group1": [
                {
                    "color": "White",
                    "Distance": "NA",
                    "height": "3ft",
                    "name": "Underlift",
                    "year": "1955"

                  },
                  {
                    "color": "blue",
                    "Distance": "4M",
                    "height": "2ft",
                    "name": "Underlift",
                    "year": "1956"

                  },
                  {
                     "color": "red",
                     "Distance": "NA",
                     "height": "3ft",
                     "name": "Golen Leaf",
                     "year": "1968"

                   },
                   {
                      "color": "yellow",
                      "Distance": "22M",
                      "height": "10in",
                      "name": "Together",
                      "year": "1988"

                   }


              ]
          },

       }
   }
       $scope.availableItems = $scope.availableItems.Items.Item.Group1;
 }

 function seletedItemCtrl($rootScope, $scope){
         $scope.seletedItem =  {
              "Items":{
                  "Item":{
                     "Group1":[{

                         "color": "black",
                         "Distance": "2M",
                         "height": "1in",
                         "name": "never",
                         "year": "1922"

                          }
                       ]
                     }
                   }
                 }
    $scope.selectedItems = $scope.seletedItem.Items.Item.Group1;

  }
    app.service("updateItem", function(){

      console.log('update item');

   });

Answer 1

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/