AngularJS 2-way-binding not updating

Question

I recently tried out angularJS together with this range-slider-directive:

https://github.com/supertorio/angular-rangeslider-directive

It worked fine using the described while I am using the data-model only inside my HTML-page. But when I am trying to use the model in the correspnding controller, I didn't get the actual value but the initial value I set during initialization in the controller.

controllers.js

 app.controller('modelViewCtrl',['$scope','$http','$routeParams', function($scope,$http,$routeParams) { $scope.modelId = $routeParams.modelId; $scope.timeIntervalStart = new Date().getTime() - (1000*60*60*24*30); $scope.timeIntervalEnd = new Date(1452240488000).getTime(); $scope.initialIntervalStart = 1452240488000 - (1000*60*60*24*30); $scope.initialIntervalEnd = 1452240488000; $scope.updateInterval = function () { console.log("update: " + $scope.initialIntervalEnd); $scope.chosenIntervalStart = new Date($scope.initialIntervalStart); $scope.chosenIntervalEnd = new Date($scope.initialIntervalEnd); } $scope.updateInterval(); }]) 

html

 <div class="panel-heading"> {{chosenIntervalStart}} <div range-slider floor={{timeIntervalStart}} step=86400000 ceiling={{timeIntervalEnd}} ng-model-low="initialIntervalStart" ng-model-high="initialIntervalEnd"></div> {{chosenIntervalEnd}} </div> 

With this I am trying to get a slide which slides between date in Milliseconds with daily steps. I am parsing the changed values in a new Date() object and want to print it out.

The problem is, that I always get only the initialIntervalStart / End values instead of the actual content from the slider. But when I am using {{initialIntervalEnd}} instead of {{chosenIntervalEnd}}, I get changing values when I change my slider. So it is updating only on 1 part of the 2-way-data-binding.

I tried to update the controller with

$scope.$apply(function() {
  //code to update data
}); 

and the same with $digest but it didn't worked.

I also tried to use a watcher on the new variable in my controller but with no results as well:

$scope.$watch('initialIntervalStart', function(oldVal,newVal) {
  //was only once applied, while initial loading the page
}

When I was using $digest and $apply, I only got errors from my browser.

Do you know how I can force this 2-way-binding?

Kind regards,

Deleadon

Answer 1

You should wrap your timeIntervalStart in an object so that angular can watch it as it is supposed.

Remember that you should not bind models to primitives directly when you need them to be updated and watched. Depending on the directive behavior you may not need this, but to avoid headaches when you expect 2 way binding to work correctly, wrap primitives in an object inside the scope.

$scope.timer = {
    timeIntervalStart: new Date().getTime() - (1000*60*60*24*30),
    timeIntervalEnd: new Date(1452240488000).getTime(),
    initialIntervalStart: 1452240488000 - (1000*60*60*24*30),
    initialIntervalEnd: 1452240488000
};

$scope.updateInterval = function () {
    console.log("update: " + $scope.initialIntervalEnd);
    $scope.timer.chosenIntervalStart = new Date($scope.timer.initialIntervalStart);
    $scope.timer.chosenIntervalEnd = new Date($scope.timer.initialIntervalEnd);
};

And the html

<div class="panel-heading">
  {{timer.chosenIntervalStart}}
  <div range-slider
       floor={{timer.timeIntervalStart}}
       step=86400000
       ceiling={{timer.timeIntervalEnd}}
       ng-model-low="timer.initialIntervalStart"
       ng-model-high="timer.initialIntervalEnd"></div>
  {{timer.chosenIntervalEnd}}
</div>