使用angularjs和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.