Angularjs scope usage in custom directive

Question

I'm trying to create a dropdown box by the means of directive without creating a separate controller. Here is my code:

index.html

<dropdown option="myoptions" />

script.js

serviceModule.directive('dropdown',function() {
    return {
        restrict: 'EA',
        replace:true,
        scope: {
            options:'='
        },
        template: '<select ng-options="opt in myoptions"></select>',
        controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
            $scope.myoptions = ['1','2','3'];
        }],
    }
});

The script neither produces errors nor displays any options in the dropdown. Could you please explain what I'm doing wrong?

Thanks in advance.

Answer 1

ng-options requires a comprehension expression of the form label for value in array. And you need to add ng-model for select to work.

template: '<select ng-model="choice" ng-options="opt for opt in myoptions"></select>',
controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
    $scope.choice;
    $scope.myoptions = ['1','2','3'];
}],

Here is a working plunker: http://plnkr.co/edit/8a6gwpVnMfvXxZzvQBOs?p=preview