Angular binding does not change

Question

i have this controller and this view (html). if i give an initial value to $scope.article.Context, it will be shown in the view. (means that the view recognizes the controller). when i change the $scope.article.Context value inside a controller function, i dont see it changing in the view. any idea ? Thanks !!!

controller:

angular.module('generalApp', [])
    .controller('menuController', function ($scope, $http) {

        $scope.article = {Context:"initial value"}  ;

        $scope.menuLinkSelected = function (articleId) {
            $http.post("Home/GetArticle?articleId=" + articleId).then(function (response) {
                $scope.article.Context = "new value";
                $scope.$apply();
            });
        };

html:

<body ng-app="generalApp">

<div ng-controller="menuController">
    <div ng-include="'partials/topMenu.html'"></div>
    <div ng-include="'partials/sideMenu.html'"></div>

    <div ng-model="article">
        <label>{{article.Context}}</label>
    </div>

    <input type="button" value="click" onclick="ziba()" />
</div>

You do not need the $scope.apply(). What you have should work. You do not need to set the ngModel on the div. What you have on the label should suffice. Like @Jake mentioned, are you sure your $http call is returning? — mithun_daa
– mithun_daa, Commented Apr 21, 2014 at 13:52
Hi. OK, I removed the $scope.$apply. About the $http call, yes, it returns value, but guys, look at this row - $scope.article.Context = "new value"; I even send a hard coded value. Even if there where no return from $http, i do return a value here.... — moshi
– moshi, Commented Apr 21, 2014 at 18:35

Jake McGuire · Accepted Answer · 2014-04-20 21:48:49Z

1

Are you sure that your $http POST request is actually returning? You could test this by changing your controller to update $scope.article.Context like this:

var timerFn = function(){
  $scope.article.Context = "It works!";
};

$timeout(timerFn, 1000);

If that's the issue, you may want to try using this $http syntax to handle your POST request's callback:

$http.post('someUrl')
     .success(function(data, status){
       console.log(data);
     })
     .error(function(data, status){
       console.log(data);
     });

Sidenotes:

(1) You can probably just set your ng-model in the DOM to "article.Context" although what you have should work.

(2) You don't need to call $scope.$apply() inside of Angular. It's only used to update bindings when changes occur outside of Angular.

answered Apr 20, 2014 at 21:48

Jake McGuire

3042 silver badges4 bronze badges

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

2 Comments

moshi Over a year ago

Hi, yes , the $scope.$apply() doesn't have to be there - my mistake. About the data coming or not, so it comes, since I put an alert to verify. About the "article.Context", it doesn't do any change... any other idea ? Thanks !!!

Jake McGuire Over a year ago

Have you tried using another property name besides "Context"? As you can see from the blue formatting above, it appears to be a reserved keyword. (Although I've never heard of it or used it.) Could you try $scope.article.test123 instead of $scope.article.Context?

aludvigsen · Accepted Answer · 2014-04-20 21:59:39Z

1

Solution:

<div>
   <label ng-bind="article.Context"></label>
</div>

You're ng-model doesn't do anything when you assign it to that div.

JSFiddle :

Here you have a working jsfiddle using your example.

edited Apr 20, 2014 at 21:59

answered Apr 20, 2014 at 21:44

aludvigsen

6,0013 gold badges29 silver badges37 bronze badges

2 Comments

moshi Over a year ago

Hi, about writing ng-model inside the div, it should be ok, i have it working somewhere else like this. I just don't know what is the problem here... btw - article.Context won't solve it :-( any other idea ? Thanks !!!

aludvigsen Over a year ago

@moshi, hi. If you see my fiddle, your example works :) Maybe there are something else in your controller or view that causes it to fail.

Collectives™ on Stack Overflow

Angular binding does not change

2 Answers 2

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related