Angularjs model change only in view, not in the controller

Question

probably a newbie question.

I have a problem where my databinding in the HTML updates just fine, but the log_interval function always console log "3". I want to use the updated model "interval" to send a request to a timeseries database, with different intervals. But every time I'm sending just 3, even though my view is updating as it should.

I've tried with $scope.$watch (like in the snippet), but it only triggers when the page is loading. Also I tried with ng-change and ng-click, both in all the radio buttons respectively and in the element. I tried to call $scope.$watch, but I get an error saying $digest is already running. Nothing works :( How can I update my model in the controller, so that I can use it for different HTTP request?

.controller('DashCtrl', ['$scope', '$log', function($scope, $log) {

  $scope.interval = 3;

  $scope.$watch("interval", function() {
    $log.log($scope.interval);
  }, true);
  
  $scope.log_interval = function() {
    $log.log($scope.interval);
  };
 
}])

;

<h1>{{interval}}</h1>
<div class="btn-group btn-group-justified">
    <label class="btn btn-default" ng-model="interval" btn-radio="1" uncheckable>1 day</label>
    <label class="btn btn-default" ng-model="interval" btn-radio="2" uncheckable>3 days</label>
    <label class="btn btn-default" ng-model="interval" btn-radio="3" uncheckable>1 week</label>
    <label class="btn btn-default" ng-model="interval" btn-radio="4" uncheckable>2 weeks</label>
    <label class="btn btn-default" ng-model="interval" btn-radio="5" uncheckable>1 month</label>
    <label class="btn btn-default" ng-model="interval" btn-radio="6" uncheckable>3 months</label>
  </div>

I do not think you have established a proper two-way databinding. Otherwise, you would not want to update model to reflect the view. It happens by itself. And, I do not get what you are trying to do in your HTML. — Sandeep Nayak
– Sandeep Nayak, Commented Apr 21, 2015 at 16:51

brettvd · Accepted Answer · 2015-04-21 17:28:16Z

1

Your code seems to work fine.

I noticed you seem to be using the UI-Bootstrap, so I forked their Plunkr showing how to do this in their documentation.

See the working Plunkr here, which uses your code.

HTML:

<h4>Radio &amp; Uncheckable Radio</h4>
<pre>{{interval || 'null'}}</pre>
<div class="btn-group">
  <label class="btn btn-default" ng-model="interval" btn-radio="1" uncheckable>1 day</label>
  <label class="btn btn-default" ng-model="interval" btn-radio="2" uncheckable>3 days</label>
  <label class="btn btn-default" ng-model="interval" btn-radio="3" uncheckable>1 week</label>
  <label class="btn btn-default" ng-model="interval" btn-radio="4" uncheckable>2 weeks</label>
  <label class="btn btn-default" ng-model="interval" btn-radio="5" uncheckable>1 month</label>
  <label class="btn btn-default" ng-model="interval" btn-radio="6" uncheckable>3 months</label>
</div>

Controller:

$scope.interval = 3;

$scope.$watch("interval", function() {
  console.log($scope.interval);
}, true);

To be clear, this $scope.interval value updates automatically when you select the button. So you do not have to update anything manually (which is one of the major benefits of using Angular). So whenever you need to do the HTTP request, just access the $scope.interval value and it will be the correct value.

In other words: you do not need the $scope.$watch unless there is more complicated logic you need to do whenever the selected button changes

edited Apr 21, 2015 at 17:28

answered Apr 21, 2015 at 17:17

brettvd

4862 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bobbyziom Over a year ago

Thank you very much for taking your time to answer! I understand that $watch should be kind of unnecessary here, but it was an attempt to force the updated model, and then run the request from there (the change event). But for some reason, I don't get the console.log($scope.interval), like in the plunkr you provided. It prints out absolutely nothing. It's like the model is only changed in the HTML and not in the controller?

brettvd Over a year ago

@user3430863 This could have something to do with your project setup. See if you can set it up more like the Plunkr. Make sure you have the correct ui-bootstrap javascript files included and you are injecting everything correctly

brettvd Over a year ago

Are you binding your controller in the HTML using ng-controller? Is this your whole setup or is there more HTML code surrounding this?

bobbyziom Over a year ago

Thank you all! Very nice of you to put such effort into my problem :) I figured could call the function with the model as a parameter, thus being sure it changes. I dont know however if this is the correct method, but it works! :) <div class="btn-group btn-group-justified" ng-click="request(interval)">

Collectives™ on Stack Overflow

Angularjs model change only in view, not in the controller

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related