How do you dynamically update an AngularJS $scope variable?

I have a project where I'm rendering a list of records to my HTML page, such as this example, which I've taken from:

https://www.w3schools.com/angular/ng_ng-repeat.asp

<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-repeat="x in records">{{x}}</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.records = [
        "Alfreds Futterkiste",
        "Berglunds snabbköp",
        "Centro comercial Moctezuma",
        "Ernst Handel",
    ]
});
</script>

</body>

Now, all of this works fine when $scope.records is statically defined. But my problem is that I need to fetch my records from a REST API that is called from my service, such as this:

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, myService) {
    myService.getRecords(function(records) {
        $scope.records = records.data;  // An array of records
    });
});
</script>

Obviously, when I call myService.getRecords(...), I pass it an anonymous function as a callback which gets executed asyc in a deferred manner.

I log the results of records so I know that my call works and my data is good and proper. But it seems as though $scope.records doesn't know it just has been updated.


Update: 2018.10.10 - Found it! Was looking for it but couldn't find the answer anywhere. Shortly after posting the question, I found it in two locations.

I'll post the links here as an answer for anyone looking for the same solution.

2 answers

  • answered 2018-10-11 19:57 Jeach

    Was looking for it but couldn't find the answer anywhere. Shortly after posting the question, I found it in two locations.

    I'll post the links here as an answer for anyone looking for the same solution.

    The answer is $scope.$apply()

    A great article here:

    http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

    And someone had a similar question on SO here:

    How can I tell AngularJS to "refresh"

    Just not sure why I didn't see that Q&A in the list when you type your question. But regardless...

  • answered 2018-10-11 20:17 Marcus Höglund

    The only reason you need $scope.$apply is becasue you are using angularjs the wrong way. And in your app, the use of jQuery to do api calls is the wrong way of doing angularjs.

    Instead of using jQuery, use angularjs $http service. The service will take care of the syncronization with the angularjs scope and you will not be forced to manually use the $scope.$apply(). The service is included in the framework so the only thing you need to do is inject it in your service

    Here's an example:

    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope, myService) {
        myService.getRecords().success(function(records) {
            $scope.records = records.data;  // An array of records
        });
    });
    app.factory('myService', function($http){
        return {
            getRecords: function() {
                return $http.get('yourapi/records');
            }
        };
    });