I thought 2 ways binding was angular thing:

I can post from a form to the controller, and if I refresh the page I see my input on the page:

$scope.loadInput = function () {

    $scope.me.getList('api') //Restangular - this part works
    .then(function(userinput) {

        $scope.Input = $scope.Input.concat(userinput);
        // scope.input is being referenced by ng-repeater in the page 
        // so after here a refresh should be triggered.

    },function(response){
        /*@alon TODO: better error handling than console.log..*/
        console.log('Error with response:', response.status);
    });
};

In the html page the ng-repeater iterates over the array of for i in input. but the new input from the form isn't shown unless I refresh the page.

I'll be glad for help with this - thanks!

I thought 2 ways binding was angular thing:

I can post from a form to the controller, and if I refresh the page I see my input on the page:

$scope.loadInput = function () {

    $scope.me.getList('api') //Restangular - this part works
    .then(function(userinput) {

        $scope.Input = $scope.Input.concat(userinput);
        // scope.input is being referenced by ng-repeater in the page 
        // so after here a refresh should be triggered.

    },function(response){
        /*@alon TODO: better error handling than console.log..*/
        console.log('Error with response:', response.status);
    });
};

In the html page the ng-repeater iterates over the array of for i in input. but the new input from the form isn't shown unless I refresh the page.

I'll be glad for help with this - thanks!

• javascript
• angularjs

• have you tried putting $scope.Input = $scope.Input.concat(userinput); inside $scope.$apply ? – az7ar Commented Oct 22, 2013 at 11:51
• 1 @az7ar: If $scope.me.getList returns an angular $q promise, then we do not need to start another digest loop in its callbacks. – musically_ut Commented Oct 22, 2013 at 12:00
• @az7ar yeah.. I did, didn't help, just got console errors about digest already running.. – alonisser Commented Oct 22, 2013 at 12:20
• Can you show the markup (html)? – Davin Tryon Commented Oct 22, 2013 at 12:35

1 Answer 1

Try $scope.$apply:

$scope.loadInput = function () {
        $scope.me.getList('api') //Restangular - this part works
        .then(function(userinput) {
               $scope.$apply(function(){ //let angular know the changes

                $scope.Input = $scope.Input.concat(userinput);
             });

            },function(response){
                /*@alon TODO: better error handling than console.log..*/
                console.log('Error with response:', response.status);
            });
    };

The reason why: Your ajax is async, it will execute in the next turn, but at this time, you already leaves angular cycle. Angular is not aware of the changes, we have to use $scope.$apply here to enter angular cycle. This case is a little bit different from using services from angular like $http, when you use $http service and handle your response inside .success, angular is aware of the changes.

DEMO that does not work. You would notice that the first click does not refresh the view.

setTimeout(function(){
             $scope.checkboxes = $scope.checkboxes.concat([{"text": "text10", checked:true}]);
         },1);

DEMO that works by using $scope.$apply

setTimeout(function(){
            $scope.$apply(function(){
         $scope.checkboxes = $scope.checkboxes.concat([{"text": "text10", checked:true}]);
            });
        },1);