PubNub AngularJS undefined function ngSubscribe

Question

I was trying to use PubNub with AngularJS following this guide from pubnub site

My code in app.js:

var myapp = angular.module('myapp', ["pubnub.angular.service"])
    .controller('MessagesController', ['$scope', '$http', '$log', '$rootScope', function($scope, $http, $log, $rootScope) {
    ....

First I do $scope.initPubNub(); and then call $scope.subscribe();

$scope.initPubNub = function() {
    if (!$rootScope.initialized) {
        pubNubDemo = PubNub.init({
              publish_key: 'some token here',
              subscribe_key: 'yet another token',
              uuid: $scope.senderId
        });
    };
    $rootScope.initialized = true;
    console.log("PUBNUB inited");
};

And the last subscribe method:

$scope.subscribe = function(theChannel) {
    console.log("1111aaaa");

    theChannel = typeof theChannel !== 'undefined' ? theChannel : "/chats/3";

    console.log(theChannel);

    console.log("????111");
    cpubNubDemo.ngSubscribe({ channel: theChannel })
    console.log("????222");


  pubNubDemo.subscribe({ channel: theChannel, callback: function() { console.log(arguments); }});

  console.log("zzzzz");

  $rootScope.$on(pubNubDemo.ngMsgEv(theChannel), function(event, payload) {
    // payload contains message, channel, env...
    console.log('got a message event:', payload);
  })

  $rootScope.$on(pubNubDemo.ngPrsEv(theChannel), function(event, payload) {
    // payload contains message, channel, env...
    console.log('got a presence event:', payload);
  })
};

I got the trace in the browser:

vvvv
app-1be16923488e02c7beff27c3ad014207.js?body=1:177 PUBNUB inited
app-1be16923488e02c7beff27c3ad014207.js?body=1:266 zzzz
app-1be16923488e02c7beff27c3ad014207.js?body=1:200 1111aaaa
app-1be16923488e02c7beff27c3ad014207.js?body=1:204 /chats/3
app-1be16923488e02c7beff27c3ad014207.js?body=1:206 ????111
app-1be16923488e02c7beff27c3ad014207.js?body=1:207 function e(a){return Jb(a)}
app-1be16923488e02c7beff27c3ad014207.js?body=1:208 ????222
angular-315fad2c2dccaccfc6923f8711bb9301.js?body=1:6350 TypeError: pubNubDemo.ngSubscribe is not a function
    at Object.$scope.subscribe (http://localhost:3000/assets/app-1be16923488e02c7beff27c3ad014207.js?body=1:211:18)
    at useHttp (http://localhost:3000/assets/app-1be16923488e02c7beff27c3ad014207.js?body=1:267:14)
    at elementFns (http://localhost:3000/assets/angular-all-unstable/angular-315fad2c2dccaccfc6923f8711bb9301.js?body=1:7004:19)
    at Object.$get.Scope.$eval (http://localhost:3000/assets/angular-all-unstable/angular-315fad2c2dccaccfc6923f8711bb9301.js?body=1:8927:28)
    at ngDirective.compile.pre (http://localhost:3000/assets/angular-all-unstable/angular-315fad2c2dccaccfc6923f8711bb9301.js?body=1:14919:15)
    at nodeLinkFn (http://localhost:3000/assets/angular-all-unstable/angular-315fad2c2dccaccfc6923f8711bb9301.js?body=1:4946:13)
    at compositeLinkFn (http://localhost:3000/assets/angular-all-unstable/angular-315fad2c2dccaccfc6923f8711bb9301.js?body=1:4551:15)
    at compositeLinkFn (http://localhost:3000/assets/angular-all-unstable/angular-315fad2c2dccaccfc6923f8711bb9301.js?body=1:4554:13)
    at compositeLinkFn (http://localhost:3000/assets/angular-all-unstable/angular-315fad2c2dccaccfc6923f8711bb9301.js?body=1:4554:13)
    at compositeLinkFn (http://localhost:3000/assets/angular-all-unstable/angular-315fad2c2dccaccfc6923f8711bb9301.js?body=1:4554:13) <table class="table table-hover display" id="" ng-init="apiCtrl.useHttp()">(anonymous function) @ angular-315fad2c2dccaccfc6923f8711bb9301.js?body=1:6350$get @ angular-315fad2c2dccaccfc6923f8711bb9301.js?body=1:5421nodeLinkFn @ angular-315fad2c2dccaccfc6923f8711bb9301.js?body=1:4949compositeLinkFn @ angular-
....
12:132 GET localhost:3000 / %7B%7B%20value['profile']['profile_photo']['thumb']%20%7D%7D 500 (Internal Server Error)

It tells that ngSubscribe not a function. What I'm doing wrong? I installed "pubnub-angular" component with a bower. in bower_components/pubnub-angular/lib/pubnub-angular.js I see:

// Generated by CoffeeScript 1.6.3
(function() {
  'use strict';
  angular.module('pubnub.angular.service', []).factory('PubNub', [
    '$rootScope', function($rootScope) {
      var c, k, _i, _len, _ref;
      c = {
        'VERSION': '1.1.0',
        '_instance': null,
        '_channels': [],
        '_presence': {},
        'jsapi': {}
      }; 
      .... 
      c.ngSubscribe = function(args) {
        var _base, _name;
        if (c['_channels'].indexOf(args.channel) < 0) {
          c['_channels'].push(args.channel);
        }
        (_base = c['_presence'])[_name = args.channel] || (_base[_name] = []);
        args = c._ngInstallHandlers(args);
        return c.jsapi.subscribe(args);
      };
      ....

What am I doing wrong?

Answer 1

it should be like this :

.controller('MessagesController', ['$scope', '$http', '$log', '$rootScope','PubNub' , function($scope, $http, $log, $rootScope, PubNub) {