Question

I'm trying to construct an incredibly simplistic select by leaning on ng-options.

    angular.module('foo', []).directive('listSelect', ['$injector', function(injector){
  return {
    restrict: 'E',
    template: "<select ng-options='val as val for val in list'></select>",
    link: function(scope, elem, attrs){
      scope.list = ['foo', 'bar', 'bazz']; 
    }
  }
}]);

That seemingly straight forward directive is failing to render the right dropdown options. Why?

plunk: http://plnkr.co/edit/PDmtUn2zBs2329PkHYiF?p=info

Was it helpful?

Solution

Your select is missing a model.

template: "<select ng-model='hier' ng-options='val for val in list'></select>"

link: function (scope) {
  scope.list = ['foo', 'bar', 'bazz'];
  scope.hier = scope.list[0];
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top