selected data from the database is not showing into dropdown list using angularjs and php

Question

Here I'm tring to get data from database and show it in dropdown list and when selecting it will be stored in database, i'm using angularjs and php but unfortunatly m not getting anything in dropdown list... please help me out.. Thanks in advance..

This is my html code.

<select class="form-control" ng-model="bookInfo.site1" placeholder="sites">
            <option ng-repeat="site in bookInfo.site1" value="{{site.Sites}}">{{site.Sites}}</option>
        </select>
<select class="form-control" ng-model="bookInfo.site2" placeholder="sites">
            <option ng-repeat="site in bookInfo.site2" value="{{site.Sites}}">{{site.Sites}}</option>
        </select>

This is my service

app.factory('SiteService', ['$http', '$q', function($http, $q){
    return {
        getSite1: function(){
            return $http.get('endpoints/selectsite.php').then(function(result) {
                return result.data;
            });
        },
        getSite2: function(animal){
            return $http.get('endpoints/selectsite.php').then(function(result){
                return result.data;
            });
        }
    };
}]);

This is my controller

$scope.bookInfo = {

    sites1: [],
    sites2: []
}

//functions

SiteService.getSite1().then(function(data){
    $scope.bookInfo.sites1 = data;
});

SiteService.getSite2().then(function(data){
    $scope.bookInfo.sites2 = data;
});

$scope.bookVisit = function(){

var data = {

    site1: $scope.bookInfo.site1,
    site2: $scope.bookInfo.site2
}
$http.post("endpoints/book.php", data).success(function(response){
    console.log(response);
    $state.go("application");
}).error(function(error){
    console.error(error);
});
}

This is my php code

<?php
    include("../connection.php");

    $query = "SELECT Sites FROM sitemaster";

    $rs = $db->query($query);

    while($row = $rs->fetchAll()){
        $data[] = $row;
    }
    print json_encode($data);

?>

Answer 1

Change your factory to look like this:

app.factory('SiteService', ['$http', '$q', function($http, $q){
    return {
        getSite1: function(){
            var do = $q.defer();
            $http.get('endpoints/selectsite.php').then(function(){
                do.resolve;
            },
            function(){
                do.reject;
            });
            return do.promise;
        },
        getSite2: function(animal){
            var do = $q.defer();
            $http.get('endpoints/selectsite.php').then(function(){
                do.resolve;
            },
            function(){
                do.reject;
            });
            return do.promise;
        }
    };
}]);

I believe this should solve your problem. also, remove the $http.post from your controller, if you have a factory, put all the api/ajax related code there, like you have done with the get requests.