How to pass two values in one $scope object

See more:

AngularJs

In my GET method when I log $scope.room_image_id I am getting two values suppose 47 and 95.

$http({
    method:'GET',
    url: '=' +$scope.current_Hotel.hotel_id
}).then(function(response){
    var roomdata = response.data;
    $scope.roomdata = roomdata;
    var roomtype = roomdata.data;
    angular.forEach(roomtype, function(value, key){
        $scope.room_image_id = value.image;
        console.info($scope.room_image_id);      <!--- HERE -->

    });

and I am passing that value in another GET method and I am supposed to get two images. One from each id that I passed.

$http({
      method: 'GET',
      url: '&image_id=' + $scope.room_image_id
     }).then(function (response) {
                   
     var imgdata = response.data;
     var imgdata1 = imgdata.data.image_name;
     $scope.room_image = "/" + imgdata1;
     console.log(imgdata1);
}

Here's the JSON data when ID is 95

{
status: 200,
message: "Packages Found",
data: {
0: "495",
1: "0",
2: "uploads/950286957inbound-marketing-ss-1920-800x450.jpg",
image_id: "495",
hotel_id: "0",
image_name: "uploads/950286957inbound-marketing-ss-1920-800x450.jpg"
}
}

and here's the JSON data when ID is 45

{
status: 200,
message: "Packages Found",
data: {
0: "45",
1: "0",
2: "uploads/17081121512t13ry63443fg43416t46136.jpg",
image_id: "45",
hotel_id: "0",
image_name: "uploads/17081121512t13ry63443fg43416t46136.jpg"
}
}

But it only returns the first JSON data i.e., when ID is 95 but I am getting both ID's when I log $scope.room_image_id

Here's the markup:

<div class="row" ng-repeat="x in roomdata.data">

    <div class="well well-sm">{{x.room_type}}<a href="#" data-toggle="modal" data-target="#room_detail{{$index}}" class="pull-right">Room Details</a>
    </div>
    <h5 class="pull-right">{{x.rack_price}}<br>Per room per night</h5>
    <img ng-src="{{room_image}}">
</div>

Added the JSON for roomdata

{
status: 200,
message: "Packages Found",
data: [
{
room_type_id: "9",
hotel_id: "40",
room_type: "Delux",
total_rooms: "10",
max_people: "2",
max_child: "1",
rack_price: "2500",
description: "<p>Sea Facing</p> ",
image: "47",
extra_person: "1",
extra_child: "1",
tax_type: "2",
tax_name: "Service Tax",
tax_amount: "9",
},
{
room_type_id: "214",
hotel_id: "40",
room_type: "Super Delux",
total_rooms: "30",
max_people: "2",
max_child: "1",
rack_price: "3000",
description: "<p>Super Delux </p> ",
image: "495",
extra_person: "1",
extra_child: "1",
tax_type: "2",
tax_name: "Service Tax",
tax_amount: "10",
}
]

I am getting 47 and 495 from image in roomdata. Also when I log $scope.room_image_id I am getting 47 and 495.Check the forEach loop in the first GET method.

What I have tried:

<div class="row" ng-repeat="x in roomdata.data">

    			<div class="well well-sm">{{x.room_type}}{{x.image}}<a href="#" data-toggle="modal" data-target="#room_detail{{$index}}" class="pull-right">Room Details</a>
    			</div>
    			<h5 class="pull-right">{{x.rack_price}}<br>Per room per night</h5>
    			<img  ng-src="{{room_image}}" ng-init=fetchImage(x.image)>

I tried passing the image id in a function and then fetch the data. Now I am getting both the images

Here's the function

$scope.fetchImage = function(value){
            $http({
            method: 'GET',
            url: '&image_id=' + value
        }).then(function (response) {
                var imgdata = response.data;
                var imgdata1 = imgdata.data.image_name;
                $scope.room_image = "" + imgdata1;
                
                console.info($scope.room_image);
            });
        };

The console now gives me two url's from which images are fetched
Example:

https://uploads/165753081311.08.10-ces_ft_photography_20755221_582_379.jpg
https://uploads/950286957inbound-marketing-ss-1920-800x450.jpg

Now how do I use binding expression to display them.