Why is angular $apply required here?

Question

Please consider the following angularjs code for a controller:

(function (app) {
    var controller = function ($scope, $state, datacontext) {
        $scope.$parent.manageTitle = "Account Management";
        $scope.accounts = [];

        var init = function () {
            getRecords();
        };

        var getRecords = function () {
            return datacontext.getAccounts().then(function (data) {
                $scope.$apply(function () {
                    $scope.accounts = data;
                });
            });
        };

        init();
    };

    app.controller("accountsCtrl", ["$scope", "$state", "datacontext", controller]);
})(angular.module("app"));

Removing the $scope.$apply wrapper and leaving just the "$scope.accounts = data" in the getRecords method breaks the code. The data is retrieved but the ng-repeat directive in the html is not automatically updated. I'm trying to get my arms around the entire $apply/$digest model, but it sure seems to be that the $apply should NOT be required in this case.

Am I doing something wrong?

Thanks.

<------------------------------------------ EDIT ---------------------------------------->

Ok, thanks for the responses. Here is the datacontext. It uses Breeze. I still can't figure out what the problem is - - I just don't see why $apply is required in the code, above.

(function (app) {
    var datacontext = function () {
        'use strict';
        breeze.config.initializeAdapterInstance('modelLibrary', 'backingStore', true);
        breeze.config.initializeAdapterInstance("ajax", "angular", true);
        breeze.NamingConvention.camelCase.setAsDefault();

        var service;
        var manager = new breeze.EntityManager('api/ProximityApi');
        var entityQuery = breeze.EntityQuery;

        var queryFailed = function (error) {
        };

        var querySuccess = function (data) {
            return data.results;
        };

        var getAccounts = function () {
            var orderBy = 'accountName';
            return entityQuery.from('Accounts')
                .select('id, accountName')
                .orderBy(orderBy)
                .using(manager)
                .execute()
                .then(querySuccess, queryFailed);
        };

        service = {
            getAccounts: getAccounts
        };

        return service;
    };
    app.factory('datacontext', [datacontext]);
})(angular.module('app'));

Thanks again!

It all depends on what the `getAccounts()` method returns... — gkalpak, May 09 '14 at 16:06
Is the datacontext a service, and does that service use promises? — Jared Reeves, May 09 '14 at 16:07
datacontext is a service, you can see it in the array notation of the controller initialization. — ryeballar, May 09 '14 at 16:09
is there anything else that uses .then() other than a promise? in that case CCPony's code is correct, but should not need $apply — SoluableNonagon, May 09 '14 at 17:09
If `getAccounts()` returns a promise, but one created by something that isn't Angular's `$q` promise implementation, like [`Q`](https://github.com/kriskowal/q), then that could cause `$scope.$apply` to be required. — Michal Charemza, May 09 '14 at 18:41
Thanks. Yes - - see the datacontext code, posted in the EDIT above. I'm using Breeze, which uses promises inherently. — CCPony, May 09 '14 at 22:14
Similar to this question https://stackoverflow.com/q/18785400/1175496 — Nate Anderson, Oct 28 '17 at 20:46

score 3 · Answer 1 · answered May 10 '14 at 14:11

Thanks for your answers. Jared - you're right on the money. By default, Breeze does not use angular $q promises, but uses third-party Q.js promises instead. Therefore, I needed $apply to synchronize the VM to the view. Recently however, the Breeze folks created angular.breeze.js, which allows the Breeze code to use angular promises, instead. By including the angular.breeze module in the application, all Breeze code will use native angular promises and $http instead.

This solved my problem and I could remove the $apply call.

See: http://www.breezejs.com/documentation/breeze-angular-service

score 1 · Answer 2 · answered May 09 '14 at 23:15

The reason that you need to use the $apply function is the result of using Breeze to to return the data. the $apply function is used to get angular to run a digest on all the internal watches and update the scope accordingly. This is not needed when all changes occur in the angular scope as it does this digest automatically. In your code, because you are using Breeze the changes are taking place outside the angular scope, thus you will need to get angular to manually run the digest, and this is true for anything that takes place out side of angular (jQuery, other frameworks ect...). It is true that Breeze is using promises to update the data, however Angular does not know how to handle the changes after the promise returns because it is out side the scope. If you were using an angular service with promises then the view would be updated automatically. If your code is working correctly as is then it would be the correct way to use $apply in this way.

The only thing I might suggest is to change the way you are calling the apply to make sure that it will only run if another digest is not currently in progress as this can cause digest errors. I suggest you call the function as such:

if(!$scope.$$phase){$scope.$apply(function () {
   $scope.accounts = data;
});

Or the other option would be to write a custom wrapper around the $apply function like this SafeApply

Why is angular $apply required here?

2 Answers2