Angular service not passing between controllers

Question

I have two controllers on a parallel scope level I need to pass data between:

function TableRowCtrl($scope, $http, sharedProperties) {
  console.log(sharedProperties.getProperty());
  $scope.items = sharedProperties.getProperty();
}

and

function SideNavCtrl($scope, $http, sharedProperties) {
  $scope.customers = undefined;
  var temp = "cats";

  $http.get('data/customers.json').success(function(data) {
    $scope.customers = data;
    temp = "dogs";
    sharedProperties.setProperty(temp)
  });

  sharedProperties.setProperty(temp);
  console.log(sharedProperties.getProperty());
}

I am trying to use a service to do this (via examples I have seen) :

angular.module('myApp', []).service('sharedProperties', function() {
var property = "Cats";
return {
    getProperty: function() {
        return property;
    },
    setProperty: function(value) {
        property = value;
    }
};
});

However - when I try and set the data in the SideNavCtrl http success function, it does not bubble out - the service still returns 'cats' as its value. From what I have read, services are supposed to be global, and setting data in them should be permanent (as is its purpose). What am I doing wrong, and how can I get data between these two controllers on the same scope?

Answer 1

The problem is your TableRowCtrl saves the result of a function in its scope variable. When the service itself changes, the value in the scope does not because at that point, it's a simple property. You can either expose your service directly in the scope or wrap $scope.items in a function instead:

function TableRowCtrl($scope, $http, sharedProperties) {
    $scope.items = function() { return sharedProperties.getProperty(); };
}

// And in your view
{{ items() }}

Or

function TableRowCtrl($scope, $http, sharedProperties) {
    $scope.shared = sharedProperties;
}

// And in your view
{{ shared.getProperties() }}

Edit: Simple plunkr here

Edit #2:

If the problem is a binding that isn't updated because of an asynchronous process, you can use $scope.$apply:

$http.get('data/customers.json').success(function(data) {
  $scope.customers = data;
  temp = "dogs";
  sharedProperties.setProperty(temp)

  if(!$scope.$$phase)
    $scope.$apply();
});

Edit 3:

I've recreated your $http.get and updated the plunkr and it works. Based on what you are showing in your questions, it should work using function instead of regular properties.

Answer 2

@SimomBelanger already identified the problem. I suggest using objects rather than primitives, then you don't need to call functions in your view:

<div ng-controller="TableRowCtrl">items={{items.property}}</div>
<div ng-controller="SideNavCtrl">customers={{customers}}</div>

app.service('sharedProperties', function () {
    var obj = {
        property: "Cats"
    };
    return {
        getObj: function () {
            return obj;
        },
        setObjProperty: function (value) {
            obj.property = value;
        }
    };
});

function SideNavCtrl($scope, $timeout, sharedProperties) {
    $scope.customers = undefined;
    var temp = "cats";
    $timeout(function () {
        $scope.customers = 'some data';
        temp = "dogs";
        sharedProperties.setObjProperty(temp);
    }, 2000);
    sharedProperties.setObjProperty(temp);
}

function TableRowCtrl($scope, $http, sharedProperties) {
    $scope.items = sharedProperties.getObj();
}

fiddle

In the fiddle I use $timeout to simulate an $http response.

Because getObj() returns a (reference to an) object, updates to that object are automatically picked up by the view.