Execute a function when the page is loaded angular - angularjs

Question

I have this function selectHotel() which executes when the select box is clicked and I have used GET method to call data and display it on my view.
I have two options on my select area and it fetches different data for both of them. I want the data of my first option to be displayed when the page is loaded and not when I click the select box.
<div class="row">
<div class ="form_group">
<select ng-click="selectHotel()" class="form-control" ng-options='item as item.hotel_name for item in hotels.data' ng-model='current_Hotel'></select>
Check In:<input type="date">
Check Out:<input type="date">
</div>
<div class="col-md-6">
<h1>{{current_Hotel.hotel_name}}</h1>
<p>{{current_Hotel.hotel_description}}</p>
<img id="hotelImg" class="img img-responsive" ng-src="{{current_Hotel.image_url}}">
<btn class="btn btn-primary">Book a room </btn>
</div>
</div>
<div class="row" ng-repeat="x in roomdata.data">
<div class="well well-sm" >{{x.room_type}}Room Details
</div>
<h5>{{x.rack_price}}<br>Per room per night</h5>
Adult: <select>
<option>1</option>
<option selected="selected">{{x.max_people}}</option>
</select>
Child: <select>
<option>{{x.max_child}}</option>
</select>
</div>
Here is the controller
var app = angular.module('myApp', []);
app.controller('ctrl1', function ($scope, $http) {
$scope.current_Hotel = {
hotel_id: "",
hotel_name: "",
hotel_description: "",
exterior_image: "",
image_url: ""
};
$http({
url: '',
method: "POST",
data: 'postData',
headers: {
'Authorization': ''
}
}).then(function (response) {
$scope.hotels = response.data;
$scope.current_Hotel = $scope.hotels.data[0];
});
$scope.selectHotel = function () {
$http({
method: 'GET',
url: '&image_id=' + $scope.current_Hotel.exterior_image
}).then(function (response) {
var imgdata = response.data;
var imgdata1 = imgdata.data.image_name;
$scope.current_Hotel.image_url = "" + imgdata1;
});
$http({
method:'GET',
url: '&hotel_id=' +$scope.current_Hotel.hotel_id
}).then(function(response){
$scope.roomdata = response.data;
});
};
});

Answer 1

Change your HTMl to invoke a changeHotel when different option is selected.
Invoke changeHotel after all the hotels are loaded passing the first item in the hotel list. This will load the data for the first hotel as per your necessity.
HTML:
<select ng-options="hotel as hotel.name for hotel in hotels"
ng-model="currentHotel"
ng-change="changeHotel(currentHotel)">
</select>
<p>{{disp}}</p>
JavaScript:
$http.get('API_URL')
.then(function(res) {
$scope.hotels = res.data;
$scope.currentHotel = res.data[0];
$scope.changeHotel($scope.currentHotel);
});
$scope.changeHotel = function(hotel) {
$scope.currentHotel = hotel;
$scope.disp = "This is data for current hotel : " + $scope.currentHotel.name;
// stuffs ...
};
Check this CodePen Demo