Angular Update Bindings

Question

I am a bit stuck trying to figure out how to apply $digest() or $apply() to update bindings.

I have done a bit of reading on other threads and I think the concept makes sense. However, I am unable to apply it to my specific context. This could mean that my approach thus far is flawed...

Here is my situation:

I have two dropdowns: School and Teacher
When the page is loaded, the School dropdown populates based on data returned from a service
When you select a school, the Teacher service fires and returns a list of teachers
Unfortunately, the teacher dropdown doesn’t populate with the new teacher list
If I click to another routed page and then click back, the new teacher list is available

Here is my MainController:

app.controller('MainController', function ($scope, $timeout, schoolService, teachersService) {
var self = this;
self.teachers = teachersService.teachers;

self.schoolSelected = function () {

            setTimeout(function () {
                    teachersService.goGetTeachers($scope.sessionKey);
                    console.log(self.teachers);
                    $scope.$apply();
            }, 5);   
};
}

When schoolSelected is triggered, it executes the teachersService. The returned data logs to console. I receive no errors.

However, it does not update self.teachers. When console.log(self.teacher) is run within the schoolSelected function, it returns "undefined."

I think this is an issue with synchronicity and that the console.log(self.teacher) and the $scope.$apply() are both running before the service has completed.

What stands out is that the code looks like a hodge-podge of different attempts to get it working. It is time to create a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) and learn [How to debug small programs.](http://ericlippert.com/2014/03/05/how-to-debug-small-programs/). — georgeawg, Mar 21 '17 at 06:00
@georgeawg i have tried to update my question to be more succinct. Does this more precisely outline my issue? — Ram N, Mar 21 '17 at 18:49
There is no need to use `$timeout` or `$apply`. They won't fix the problem. See [How to use $http promise successCallback response outside callback in angularJs](http://stackoverflow.com/a/35280444/5535245). — georgeawg, Mar 21 '17 at 19:26

score 0 · Answer 1 · answered Mar 20 '17 at 22:35

AngularJS does not persist controller scope data across multiple routes unless the data is bind to $rootScope. In your case, you can make use of a service and have the data persisted across all routes. Check the code below for an understanding

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        Value of foo property : {{data.foo}}
    </div>
    <div ng-view></div>
</div>

angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
    $routeProvider.when('/', {
        template: '<h1>Data</h1><a href="#/data">Data View</a>',
    })
    .when('/data', {
        template: '<h2>Data</h2><input type="text" ng-model="data.foo" />' +
                   '<br /><a href="#/">Back</a>',
        controller: 'dataCtrl'
    })
    .otherwise({
        redirectTo: '/'
    });
 }).factory('mySharedData', function() {    
       return {
         shareData: {
                 foo: 'foo',
                 bar: 'bar'
         }
     }
 }).controller('myCtrl', ['$scope', 'mySharedData', function($scope, mySharedData) {    
      $scope.data = mySharedData.shareData;
    }
]);

Angular Update Bindings

1 Answers1