AngularJS $scope is undefined outside of .then function

Question

I have a a form which includes select input but the thing is ng-options is not working

Select code

<select  ng-model="selectedGender" ng-options="item.value for item in genderData">

I got the data from

 ReferenceService.searchCategory("GENDER").then(function (response){

            $scope.genderData = response.data;
            console.log($scope.genderData);

        })

This is the console.log($scope.genderData)

Array(2)
0:{referenceId: 1, category: "GENDER", key: "GENDER_KEY", value: "Male", $$hashKey: "object:3"}
1:{referenceId: 2, category: "GENDER", key: "GENDER_KEY", value: "Female", $$hashKey: "object:4"}
length:2
__proto__
:
Array(0)

but I have tried hard coding the data

  $scope.genderData= [
            {
                "id": 1,
                "name": "Leanne Graham",
                "username": "Bret",
                "email": "Sincere@april.biz",
                "address": {
                    "street": "Kulas Light",
                    "suite": "Apt. 556",
                    "city": "Gwenborough",
                    "zipcode": "92998-3874",
                    "geo": {
                        "lat": "-37.3159",
                        "lng": "81.1496"
                    }
                },
                "phone": "1-770-736-8031 x56442",
                "website": "hildegard.org",
                "company": {
                    "name": "Romaguera-Crona",
                    "catchPhrase": "Multi-layered client-server neural-net",
                    "bs": "harness real-time e-markets"
                }
            } 
        ];

and it worked! but I used ng-options="item.name for item in genderData">

btw don't mind the data I just searched it for fast use

EDIT:

I think I found the problem. Why is it undefined outside the function?

check this console

line 244 is undefined but line 242 is not?

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — JLRishe, Apr 18 '18 at 09:33
_"Why is it undefined outside the function?"_ because the code after the `.then` runs _before_ the code inside it. — JLRishe, Apr 18 '18 at 09:34

score 2 · Answer 1 · answered Apr 18 '18 at 09:29

2

store the response in var then out side the function assign that var to $scope. it is a callback issue.

If still it's showing same you can use localsorage to store and get the data. but this approach is not recomanded in angularjs. but if nothing happen then you can use this approcah also

answered Apr 18 '18 at 09:29

Sangram Badi

4,054
9
45
78

this solved my issue but as you said I want to avoid using session storage as much as possible – Mark Apr 18 '18 at 09:50

Red · Answer 2 · 2018-04-18T13:19:22.053

That's because ReferenceService.searchCategory("GENDER") returns a promise.

A promise will wait until the data is resolved, and then move on to its success function callback. Which is the .then(function(response)).

So the code will get to the console.log on line 244 before the promise has finished, and $scope.genderData has been created and therefore is undefined

The console.log on line 242 will wait until the promise has been resolved, and calls the success callback function.

UPDATE:

Here an example how to correctly link the $scope to the factory.

Note that you must link to the object and not to its properties in your $scope.

Wrong:

$scope.gender = ReferenceService.data.genderData;

Correct:

$scope.gender = ReferenceService.data;

Example:

myApp.factory('ReferenceService',
    function ()
    {
        var ReferenceService = {
            // This is the global object. Link the $scope to this object
            data: {
                genderData: {}
            },
            searchCategory: function (type)
            {
                var getData = $http.get("URL", { params: { gender: type } }).then(
                    function (response)
                    {
                        // Store the data in the factory instead of the controller
                        // You can now link your controller to the ReferenceService.data
                        ReferenceService.data.genderData = response.data;
                    }
                )

                return getData;
            }
        }

        return ReferenceService;
    }
);

myApp.controller('MyController',
    function ($scope, ReferenceService)
    {
        // Link $scope to data factory object
        $scope.gender = ReferenceService.data;

        // Now you only have to call the factory function
        ReferenceService.searchCategory("GENDER");

        // This will now log the correct data
        console.log($scope.gender.genderData);
    }
)

Create the `$scope.gender` at the top of your page. So `$scope.gender = {}`; — Red, Apr 18 '18 at 09:41
Create a global variable inside your factory. Then link your scope to that variable. — Red, Apr 18 '18 at 09:59
See update, although it might be a little difficult for you to understand. — Red, Apr 18 '18 at 10:11

AngularJS $scope is undefined outside of .then function

2 Answers2

UPDATE: