In AngularJS how do I pass variables between controllers with a service?

Question

I want to pass a variable between controllers with a service. Here is the service to pass the variable (in this case a song id):

'use strict';

angular.module('PortalApp')
  .service('ActionbarService', ['$window', function ActionbarService(window) {
    var song;
    return {
        getSong: function () {
            return song;
        },
        setSong: function(value) {
            song = value;
        }
    };
  }]);

Here is the relevant part of the controller I am setting the song from:

$scope.actionbarSetSong = function(song_id) {
  ActionbarService.setSong(song_id);
}

and here is the controller I am getting the song id from:

'use strict';

angular.module('PortalApp')
  .controller('ActionbarCtrl', function ($scope, MediaService, ActionbarService, $location, $routeParams, AudioPlayerAPI) {
    $scope.song_id = ActionbarService.getSong();
    $scope.openPlaylistModal = function (song_id) {

      $("#addToPlaylist").modal('show');
    }
  });

It is being set in the service because when I do getSong in my view it worked (I forget where), but then when I try to set it in my 2nd controller it doesn't work. Here's the relevant part of my view for reference:

    <div class="cell action-bar" ng-click="actionbarSetSong(song.id);" ng-repeat="song in media.data">
Some Stuff
    </div>

Answer 1

Mmm.. service returns new ActionbarService. You probably want to use factory, or change your getters/setters to this.get & this.set.

Also, avoid polluting the $rootScope; whenever you want to share data between controllers, use a service.