AngularJS - Controller variable not updating from a service function

Question

I have this variable that is being controlled by the Factory and to update the Controller but it's not happening.

Here is what I have:

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

app.controller('AppController', function($scope, AppFactory) {
  var vm = this;

  $scope.serverStatus = AppFactory.getStatus();
});

app.factory('AppFactory', function($timeout) {

  var AppFactory = {};
  var vm = this;
  vm.serverStatus = true;

  // Execute after 2 seconds of page start
  $timeout(function() {
    AppFactory.setStatus(false);
  }, 2000);

  AppFactory.setStatus = function(status) {
    console.log('Server set to ' + status);
    vm.serverStatus = status;

    // Getting server status = false
    AppFactory.getStatus();
  };


  AppFactory.getStatus = function() {
    console.log('Getting server status: ' + vm.serverStatus);
    return vm.serverStatus;
  };

  return AppFactory;
});

LIVE PLUNKER DEMO: https://plnkr.co/edit/62xGw7Klvbywp9TODWF4?p=preview

Do you think Directives would work better with 2-way-communication between a factory and controller?

Answer 1

Check this edited the plunkr https://plnkr.co/edit/z6tdr5?p=preview

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

app.controller('AppController', function($scope,$timeout, AppFactory) {
  var vm = this;

  $timeout(function() {
    AppFactory.setStatus(false);
    $scope.serverStatus = AppFactory.getStatus();
  }, 2000);

  $scope.serverStatus = AppFactory.getStatus();
});

app.factory('AppFactory', function($timeout) {

  var AppFactory = {};

  var serverStatus = true;

  // Execute after 2 seconds of page start


  return {
        getStatus: function () {

          //console.log('Getting server status: ' + vm.serverStatus);
          return serverStatus;
        },
        setStatus : function(status) {
          var vm = this;
        console.log('Server set to ' + status);
        serverStatus = status;

        // Getting server status = false
        vm.getStatus();
  }
  };
});

Answer 2

Here's a solution that uses events, eg:

app.controller('AppController', function($scope, AppFactory) {
  var vm = this; 

  $scope.$on('messageOne', function(event, data){
    console.log(data);
      $scope.serverStatus = data;
      $scope.$apply(); //I think $apply() is not needed here!
  });

  $scope.serverStatus = AppFactory.getStatus();


});

app.factory('AppFactory', function($timeout, $rootScope) {

  var AppFactory = {};
  var vm = this;
  vm.serverStatus = true;

  // Execute after 2 seconds of page start
  $timeout(function() {
    AppFactory.setStatus(false);
  }, 2000);

  AppFactory.setStatus = function(status) {
    console.log('Server set to ' + status);
    vm.serverStatus = status;

    // Getting server status = false
    //AppFactory.getStatus();

    $rootScope.$broadcast('messageOne', status);
  };


  AppFactory.getStatus = function() {
    console.log('Getting server status: ' + vm.serverStatus);
    return vm.serverStatus;
  };

  return AppFactory;
});

https://plnkr.co/edit/pARMnE3Wl0OeJezKuvLT?p=info