将选择的下拉列表绑定到json

Question

I am kinda new to this, and I can't make it work. I have a chosen dropdown and a call to a rest api on a different domain. The cross domain story I solved with a chrome plugin, as it is only temporary, the api and the frontend will be on the same domain, later. So this is what I have: the directive

app.directive('filterSection', function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'app/users/filterSection.html',
        controller: function ($scope, reposSvc, toastr) {
            $scope.selectedManufacturerId = {};
            $scope.manufacturers = [];

            $scope.manufacturers1 = [{ id: 1, name: 'abc'}];
            $scope.manufacturers = reposSvc.manufacturer.query(
                function (data) {
                },
                function () {
                    toastr.error("Some error message");
                }
            ).$promise.then(function () {
                $scope.manufacturers = [{ id: 2, name: 'def' }];
            });

            console.log($scope.manufacturers);
            console.log($scope.manufacturers1);
        }
    }
});

the repo service:

app.service('reposSvc', function ($resource, noLimitsAdminUrl) {
    return {
        //MANUFACTURERS
        manufacturer: $resource(baseUrl + 'manufacturer/:id', null, {
            'get': { method: 'GET', params: { id: null } },
            'update': { method: 'PUT', params: { user: null } },
            'insert': { method: 'POST', params: { user: null } },
            'delete': { method: 'DELETE', params: { id: null } }
        })
    }
});

the HTML:

<div class="form-group">
        <label for="manufacturers1" class="col-xs-3 col-sm-3 col-md-3 control-label">Manufacturers</label>
        <div class="col-xs-5 col-sm-5 col-md-5">
            <select class="form-control" style="display:inline-block" name="manufacturers1" ng-model="selectedManufacturerId" ng-options="m.name for m in manufacturers1" chosen required>
                <option value="">choose manufacturer</option>
            </select>
        </div>
    </div>
    <div class="form-group ">
        <label for="manufacturers" class="col-xs-3 col-sm-3 col-md-3 control-label">Manufacturers</label>
        <div class="col-xs-5 col-sm-5 col-md-5">
            <select class="form-control" style="display:inline-block" name="manufacturers" ng-model="selectedManufacturerId" ng-options="m.name for m in manufacturers"  chosen required>
                <option value="">choose manufacturer</option>
            </select>
        </div>
    </div>

So the first dropdown gets bound, the second one doesn't. If I use standard selects, they both get bound. The two console logs look like this:

1: `Promise {$$state: Object, then: function, catch: function, finally: function}`
2:[Object]

so most probably this is the issue. same thing happens if I use the data from the promise.

EDIT : if I use an ng-repeat on the manufacturers it works ok:

<ul>
    <li ng-repeat="manu in manufacturers">{{manu.name}}</li>
</ul>

Answer 1

As error clearly suggest

You are assigning $scope.manufacturers is a promise object as per your current implementation.

You need to access it data returned by promise hence use following code.

Use

reposSvc.manufacturer.query(function(data) {
    $scope.manufacturers = data;
}, function() {
    toastr.error("Some error message");
});