Still Learning

A lot of times my friends ask me - "How do we share data between controllers in Angular.js?"

Since services in Angular.js are injectable singletons, they seem like a good choice for sharing mutable data. But nothing is worth anything without some code. So here goes -

some.html

<div class="row">
  <div class="span12" ng-controller="MainCtrl">
    <h2>Hello {{name}}!</h2>
  </div>
</div>

<div class="row" ng-controller="AnotherCtrl">
  <div class="span12">
    <h2>Greetings from {{name}}!</h2>
  </div>
</div>

main.coffee

'use strict'

class MainCtrl

  constructor: (@$scope, @helperService) ->
    @$scope.name = "World"
    @helperService.setName("Coffee")

MainCtrl.$inject = ["$scope", "helperService"]
angular.module("demoApp").controller "MainCtrl", MainCtrl

another.coffee

'use strict'

class AnotherCtrl

  constructor: (@$scope, @helperService) ->
    @$scope.name = @helperService.getName()

AnotherCtrl.$inject = ["$scope", "helperService"]
angular.module("demoApp").controller "AnotherCtrl", AnotherCtrl

Finally, the helper.coffee

'use strict'

class HelperService

  constructor: () ->

  setName: (name) ->
    @name = name

  getName: ->
    @name

angular.module "demoApp.helperService", [], ($provide) ->
  $provide.factory "helperService", -> new HelperService()

It works! QED :)