angular scope object issue

Question

PROBLEM:

I created one var object and inside that var object i am referring to slider scope object. so when I will use my slider it will update scope object but not update in reference object. i.e filterObject.filter.priceRange.min so for changin var object i have to do it manually then it will work

you can see my fiddle so you will understand what i am trying to say because i don't know how to explain my problem.

Workinh example: http://jsfiddle.net/kevalbhatt18/wk6xhy3k/4/

see what i did:

// this object is for slider
$scope.priceRangeSlider = {
    minValue: 100,
    maxValue: 10000,
    options: {
        floor: 100,
        ceil: 10000,
        step: 1,
        translate: function(value) {
            return 'Rs ' + value;
        }
    }
};

//var object refere to scope object 
var filterObject = {
    filter: {
        priceRange: {
            min: $scope.priceRangeSlider.minValue // refe not working 
        },
        yearRange: {},
        languageValue: [],
        formatValue: []

    }
};

HOW YOU DEBUG:

slide "price slider" so you can se changeing value below the yearslider, after changing value of price slider click on button below the price slider you will get 100 which is allocated at onload of application

Answer 1

The reason to the problem is that filterObject.filter.priceRange.min will be evaluated only once, when the controller is run for the first time.

One fix is to change it to a function:

var filterObject = {
    filter: {
        priceRange: {
            min:function () { return $scope.priceRangeSlider.minValue; }
        ...

Then:

$scope.minvaluetest = filterObject.filter.priceRange.min();

Fiddle: http://jsfiddle.net/masa671/9kjqeueo/

UPDATE:

You just need to turn the logic the other way around.

See a new Fiddle: http://jsfiddle.net/masa671/z5fkvh5b/

Now filterObject has the value that can be sent to a server.