Angularjs not loaded data to select option

Question

I have a select option which is need to populate the data from database (JSON)

But its not populate even i have the correct json data

sample.html

<div class="form-group form-group-sm">
    <label class="sr-only" for="inputDoctype">Type</label>
    <select aria-describedby="basic-addon1" class="form-control" ng-model="matin.type" ng-options="x.type for x in data">
        <option value="{{x.type}}">{{x.type}}</option>
    </select>
</div>

controller.js

var xhr = $http({
    method: 'post',
    url: 'http://localhost/onseral/api/list-doctype.php'
});
xhr.success(function(data){
    console.log(JSON.stringify(data));
    $scope.data = data.type;
});

list-doctype.php

<?php

require_once '/config/dbconfig.php';

$table = (isset($_GET['table'])) ? $_GET['table'] : NULL;

getById($table);

function getById() {
    $sql = "SELECT distinct type FROM min_in_head order by type asc";
    try {
        $db = getdb();
        $stmt = $db->prepare($sql);
        $stmt->execute();
        $data = $stmt->fetchAll(PDO::FETCH_OBJ);
        $db = null;
        echo json_encode($data);

    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}';
    }
}
?>

console result

[{"type":"Adj"},{"type":"WC IN"}]

Anyone know why?

Answer 1

first of all your json doesn't seem logical, I would have chnaged it too:

{"type":["Adj","CONS OUT"]}

but anyway, you need to use angular http service for populating scope! so it would be like this:

$http.post('http://localhost/onseral/api/list-doctype.php').then(function(res) {
        $scope.matin= res.data;
    });

Answer 2

Try with this

<div class="form-group form-group-sm">
    <label class="sr-only" for="inputDoctype">Type</label>
    <select aria-describedby="basic-addon1" class="form-control" ng-model="matin.type" ng-options="x as x.type for x in data">
    </select>
</div>

Answer 3

you can use it

<select class="form-control" ng-model="matin.type" ng-options="x.type for x in data">
     <option value ="">select one</option>
</select>

no need

<option value="{{x.type}}">{{x.type}}</option>