Search code examples
javascriptangularjsng-optionsangular-servicesangularjs-ng-options

ngOptions Erroring when data is returned

console.log in the controller is outputting the object {name:'12345235'} which is fine but trying to use the ng-option attribute in the HTML section gives the below error, I've tried returning multiple nested objects from the service but still get the below error in the console, any tips/help appreciated, stumped at this stage, not sure what else I can try?

HTML:

<html ng-app="app">
...
<body>
    ...
    <div ng-controller="SetsController">
        <section ng-options="set in sets"><p>{{set.name}}</p></section>
    </div>
    ...
</body>
</html>

Angular code:

angular.module('app', []);

angular.module('app').controller('SetsController', ['$scope', 'setsService', function($scope, setsService){
    $scope.sets = setsService.display('123', 3);
    console.log($scope.sets);
}]);

angular.module('app').service('setsService', function(){
    this.display = function(setId, limit) {
        return {name:'12345235'}
    }
});

Console Error:

Error: [$compile:ctreq] http://errors.angularjs.org/1.4.7/$compile/ctreq?p0=select&p1=ngOptions
I/<@http://devt.local.one/core/lib/angular.js:6:416
t@http://devt.local.one/core/lib/angular.js:59:233
t@http://devt.local.one/core/lib/angular.js:59:300
K@http://devt.local.one/core/lib/angular.js:62:78
g@http://devt.local.one/core/lib/angular.js:54:410
K@http://devt.local.one/core/lib/angular.js:61:1
g@http://devt.local.one/core/lib/angular.js:54:410
g@http://devt.local.one/core/lib/angular.js:54:433
g@http://devt.local.one/core/lib/angular.js:54:433
g@http://devt.local.one/core/lib/angular.js:54:433
g@http://devt.local.one/core/lib/angular.js:54:433
W/<@http://devt.local.one/core/lib/angular.js:53:480
zc/d/</<@http://devt.local.one/core/lib/angular.js:20:99
lf/this.$get</n.prototype.$eval@http://devt.local.one/core/lib/angular.js:133:217
lf/this.$get</n.prototype.$apply@http://devt.local.one/core/lib/angular.js:133:446
zc/d/<@http://devt.local.one/core/lib/angular.js:20:57
e@http://devt.local.one/core/lib/angular.js:39:191
zc/d@http://devt.local.one/core/lib/angular.js:19:1
zc@http://devt.local.one/core/lib/angular.js:20:274
Zd@http://devt.local.one/core/lib/angular.js:19:83
@http://devt.local.one/core/lib/angular.js:293:238
a@http://devt.local.one/core/lib/angular.js:174:399
Hf/c@http://devt.local.one/core/lib/angular.js:35:212

http://devt.local.one/core/lib/angular.js
Line 107
Solution

  • ngOptions directive requires select directive. It cannot be used by its own. So you should either use proper structure with select tag instead of section (and don't forget ngModel too in this case) or use ngRepeat:

    <div ng-controller="SetsController">
    <section ng-repeat="set in sets"><p>{{set.name}}</p></section>
</div>