View not getting the new value

Question

I have this service to keep the status of the app up to date.

'use strict';

angular.module('reportApp')
  .service('Status', function Status() {

    this.appStatus = {};

    // Status
    this.get = function(){

        this.appStatus = {

            menu:{
                right:{
                    activeOption: 'datax'
                },
                left:{

                }
            },
            section:{
                selectedSection: null
            }

        };

        return this.appStatus;

    };

    this.setActiveOptionRightMenu = function(menu){

        this.appStatus.menu.right.activeOption = menu.id;

    };

    this.setActiveSection = function(section){

        this.appStatus.section.selectedSection = section;

    };

    // ####################################


  });

In my main controller I have this:

$scope.openRightMenu = function(menu){

    Status.setActiveOptionRightMenu(menu);
    $scope.menu = Status.get().menu;

};

$scope.menu = Status.get().menu;

When controller load in the first moment it gets the right default value:

$scope.menu = Status.get().menu;

In the first moment I'm expecting activeOption: 'datax' and it's right. But after the event click in the view calling openRightMenu the view does not update the new value. If I put a breakpoint inside the setActiveOptionRightMenu I can see the new value being setted, but after that looks like the view ignore the new value and keep using the old one.

Answer 1

In your get function you are overriding this.appStatus:

 // Status
this.get = function(){

    this.appStatus = {

        menu:{
            right:{
                activeOption: 'datax'
            },
            left:{

            }
        },
        section:{
            selectedSection: null
        }

    };

    return this.appStatus;

};

This will always return this object of this.appStatus with the activeOption defined as 'datax'. You should define it with its defaults outside of the get function or check to see if it is null.

// Status
this.appStatus = {

        menu:{
            right:{
                activeOption: 'datax'
            },
            left:{

            }
        },
        section:{
            selectedSection: null
        }

      };
this.get = function(){
      return this.appStatus;
}