Add selectbox from Directives controller

Question

I am trying to dynamicaly add select box from directive. the same ng option works perfectly without directive but from directive it gives empty list . please check below fiddle.

I dont want to put selectbox in Directive template ... i need to add them from controller only..

Fiddle:: http://jsfiddle.net/NfPcH/2009/

Code:

<select ng-model="selectedOption" ng-options="option for option in [1,2,3,45,6,8,9,7]"></select>

Answer 1

The correct way to solve your problem is to use the directive compile function (read 'Compilation process, and directive matching' and 'Compile function') to modify elements before its compilation.

Working Demo

app.directive('hello', function () {
    return {
        restrict: 'E',
        scope: {},
        template: 'hello world',
        controller: function ($scope, $element, $attrs, $compile) {
            var el = angular.element('<select ng-model="selectedOption" ng-options="option for option in [1,2,3,45,6,8,9,7]"></select>');
            $compile(el)($scope);
            $element.append(el);
        },
    }
});