Unable to share data between AngularJS controllers?

Question

I had seen the egghead.io video on sharing data between controllers, but couldn't get it to work:

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

myApp.factory('QData', function () {
    return 'hello'
});

function QCtrl($scope, $http, QData) {
  $scope.foo = QData;
}

QCtrl.$inject = ['$scope', '$http', 'QData'];

function YCtrl($scope, $http, QData) {
  $scope.bar = QData;
}

YCtrl.$inject = ['$scope', '$http', 'QData'];

See code (with additional bootstrap view) running on Plnkr

Answer 1

You should use an intermediate object and it's property directly.

Like this.