Invoke initial callback without $evalAsync

Fixes bug where state could be undefined while angular was running its
initial digest cycle initializing controllers.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "flux-angular",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "main": "release/flux-angular.js",
   "ignore": [
     "**/.*",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flux-angular",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "A FLUX architecture for Angular JS",
   "main": "./src/flux-angular.js",
   "scripts": {

release/flux-angular.js

@@ -4809,7 +4809,8 @@ angular.module('flux', []).provider('flux', function FluxProvider() {
   $rootScope.constructor.prototype.$listenTo = function (storeExport, mapping, callback) {
     var _this = this;
 
-    var cursor = void 0;
+    var cursor = void 0,
+        originalCallback = void 0;
     var store = flux.getStore(storeExport);
 
     if (!store.__tree) {
@@ -4823,21 +4824,21 @@ angular.module('flux', []).provider('flux', function FluxProvider() {
       cursor = store.__tree.select(mapping);
     }
 
+    originalCallback = callback;
     if (useEvalAsync) {
-      (function () {
-        var originalCallback = callback;
-        callback = function callback(e) {
-          _this.$evalAsync(function () {
-            return originalCallback(e);
-          });
-        };
-      })();
+      callback = function callback(e) {
+        _this.$evalAsync(function () {
+          return originalCallback(e);
+        });
+      };
     }
 
     cursor.on('update', callback);
 
-    // Call the callback so that state gets the initial sync with the view-model variables
-    callback({});
+    // Call the callback so that state gets the initial sync with the view-model variables. evalAsync is specifically
+    // not used here because state should be available to angular as it is initializing. Otherwise state can be
+    // undefined while the first digest cycle is running.
+    originalCallback({});
 
     // Remove the listeners on the store when scope is destroyed (GC)
     this.$on('$destroy', function () {

src/flux-angular.js

@@ -185,7 +185,7 @@ angular.module('flux', [])
 
     // Extend scopes with $listenTo
     $rootScope.constructor.prototype.$listenTo = function (storeExport, mapping, callback) {
-      let cursor;
+      let cursor, originalCallback;
       const store = flux.getStore(storeExport);
 
       if (!store.__tree) {
@@ -199,17 +199,19 @@ angular.module('flux', [])
         cursor = store.__tree.select(mapping);
       }
 
+      originalCallback = callback;
       if (useEvalAsync) {
-        const originalCallback = callback;
         callback = (e) => {
           this.$evalAsync(() => originalCallback(e));
         };
       }
 
       cursor.on('update', callback);
 
-      // Call the callback so that state gets the initial sync with the view-model variables
-      callback({});
+      // Call the callback so that state gets the initial sync with the view-model variables. evalAsync is specifically
+      // not used here because state should be available to angular as it is initializing. Otherwise state can be
+      // undefined while the first digest cycle is running.
+      originalCallback({});
 
       // Remove the listeners on the store when scope is destroyed (GC)
       this.$on('$destroy', () => cursor.off('update', callback));

tests/flux-angular-spec.js

@@ -153,21 +153,16 @@ describe('FLUX-ANGULAR', function() {
           expect($scope.$listenTo).toBeDefined();
         });
 
-        it('should call $evalAsync and then the callback when $listenTo is first attached so that the view-model is initialized', function() {
+        it('should invoke the callback immediately upon setting up the store so that state is available to angular as it is initializing', function() {
           $scope.$listenTo(MyStore, cb);
-          expect($scope.$evalAsync.calls.count()).toEqual(1);
-          expect(cb.calls.count()).toEqual(0);
-          $browser.defer.flush();
-
+          expect($scope.$evalAsync.calls.count()).toEqual(0);
           expect(cb.calls.count()).toEqual(1);
           expect(cb.calls.argsFor(0)[0]).toEqual({});
         });
 
         it('should call $evalAsync and the callback when state is changed on any part of the tree', function() {
           $scope.$listenTo(MyStore, cb);
-          $browser.defer.flush();
           cb.calls.reset();
-          $scope.$evalAsync.calls.reset();
 
           flux.dispatch('addItem', { item: 'foo' });
           expect($scope.$evalAsync.calls.count()).toEqual(1);
@@ -184,9 +179,7 @@ describe('FLUX-ANGULAR', function() {
 
         it('should call the callback if a specific cursor is listened to and changed', function() {
           $scope.$listenTo(MyStore, ['items'], cb);
-          $browser.defer.flush();
           cb.calls.reset();
-          $scope.$evalAsync.calls.reset();
 
           flux.dispatch('addItem', { item: 'foo' });
           expect($scope.$evalAsync.calls.count()).toEqual(1);
@@ -201,9 +194,7 @@ describe('FLUX-ANGULAR', function() {
 
         it('should remove the listener when the scope is destroyed', function() {
           $scope.$listenTo(MyStore, ['items'], cb);
-          $browser.defer.flush();
           cb.calls.reset();
-          $scope.$evalAsync.calls.reset();
 
           // need to keep a ref to evalAsync since it is removed when the scope is destroyed
           const evalAsync = $scope.$evalAsync;
@@ -223,7 +214,6 @@ describe('FLUX-ANGULAR', function() {
           $scope.$listenTo(MyStore, function() {
             cb('MyStore');
           });
-          $browser.defer.flush();
           cb.calls.reset();
 
           flux.dispatch('addItem', { item: 'test' });