Get data in Angular Service and pass it through to another controller

Question

I dont't know if this is the right way to tackle the issue im trying to solve, if you have a better idea or maby a more efficient way to do this Im all open for things :). I know I could do this also with broadcasting the value but I wanna use the service for changing and modify data based on the values it gets. I kinda simplified it only hoping it already would work.

So what is happening, I send a value on a click to the Service with:

$scope.newName = function(name) {
    nameService.newName(name);
};

Than receive the value into my service and try to send it to another controller with:

    var placeHolderName = 'anonymouse';
    var name = [];

    return {
        newName: function (repsonse) {
            placeHolderName = 'noAnonymouse'
            name = 'hi new' + repsonse;
        },

        getNewName: function() {

            if (placeHolderName === 'anonymouse') {
                return placeHolderName;
            }
            else {
                return name;
            }
        }
    };

But as you can see if there is no value passed in yet it just contains the 'anonymouse' name once there is a new value passed there is no need for the placeholder variable anymore.

and trying to update the 'anonymouse' name once there is a new value passed in through the service and it updates the $scope with the new value. Im fetching it with:

$scope.name = nameService.getNewName();

$scope.$watch('name', function(newValue, oldValue) {
    console.log(newValue, oldValue);
});

It sadly doesn't work the way I try to use it here.

Answer 1

Updated answer based on codepen:

Instead of watching name, you should watch for changes to service.getName

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

app.controller('sendController', function($scope, service) {
  $scope.newName = function(name) {
    service.setName(name);
  };
});

app.controller('getController', function($scope, service) {
  $scope.name = service.getName();
  $scope.$watch(service.getName, function(newValue, oldValue) {
    $scope.name = newValue;
  });
});

app.factory('service', function() {
  var name = 'anonymouse';
  return {
    setName: function(newName) {
      name = newName
    },
    getName: function() {
      return (name === 'anonymouse') ? name : 'hi new' + name;
    }
  }
});
var el = document.getElementById('container');
angular.bootstrap(el, ['test']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="container">
  <div ng-controller="sendController">
    <button ng-click="newName('bob')">Bob</button>
    <button ng-click="newName('Dennis')">Dennis</button>
  </div>

  <div ng-controller="getController">
    {{ name }}
  </div>
</div>

You can also remove the $scope.$watch and do $scope.name = service.getName; along with updating the expression to {{ name() }}

---

If I understood correctly you can just do this:

  var name = 'Anonymous';
  return {
   setName: function(newName) {
     name = newName
   },
   getName: function() {
     return (name === 'Anonymous') ? name : 'hi new' + name;
  };