Why am I getting an error, "ReferenceError: categories is not defined" in AngularJS?

Issue

In my understanding, $scope.categories is already defined. Then why am I getting this error and not able to access data from the Json file?

Here is my controller:

(function(){

    app.controller('productsCtrl', ['$scope','$cookies', '$http', function($scope,$cookies,$http){

        $http.get("controllers/data.json").then(function (response) {
            $scope.categories = response.data;
        }); 

        $scope.specials = [categories[0].laptops[1], categories[1].accessories[0]];

    }]);

})(); 

Here is my Json file:

[
  {
    "laptops": [     
      {
        "name": "Asus Laptop",
        "price": 300
      },
      {
        "name": "HP Notebook",
        "price": 200
      }
    ]
  },
  {
    "accessories": [
      {
        "name": "WD Hard Drive",
        "price": 100
      },
      {
        "name": "WD Blue SSD",
        "price": 700
      }
    ]
  }
] 

Solution

You have assigned response data into $scope.categories, you need to use $scope.categories instead of categories and also you should add into $scope.specials once http call completed like

(function(){

    app.controller('productsCtrl', ['$scope','$cookies', '$http', function($scope,$cookies,$http){

        $scope.specials = [];
        $http.get("controllers/data.json").then(function (response) {
            $scope.categories = response.data;
            $scope.specials.push($scope.categories[0].laptops[1]);
            $scope.specials.push($scope.categories[1]. accessories[0]);
        }); 

        

    }]);

})(); 

Answered By - Arif Khan