AngularJS directive template doesn't get compiled

Question

I'm trying to create an Angular multi-select custom directive: a modal with a list of choices with checkboxes. I use isolated scope. However, the directive template is appended as such, angular expressions are not interpreted, after a lot of research and thinking, I still don't know what I'm doing wrong since this is a pretty basic task.

(jFiddle is here http://jsfiddle.net/webaba/ev52F)

app.directive('pickFromList', function(){
   return {
    restrict: 'EA',
    scope:{           
        model: '=ngModel',
        options: '=ngOptions',
        title: '@',
        label: '@',
        idField: '@idField',
    },
    replace:true,
    template: '<div ng-init="open=false"><button class="btn btn-info" ng-click="open=true">Test</button>'+
            '<div class="modal" ng-show="open">'+
                '<div class="modal-header">'+
                    '<button type="button" class="close" ng-click="open=false">✕</button>'+
                    '<h3>{{ title }}</h3>'+
                '</div>'+
                '<div class="modal-body" style="text-align:center;">'+
                    '<div ng-repeat="option in options" style="text-align:\'left\'">'+
                        '<ul class="unstyled">'+
                            '<li class=""><input ng-click="toggleItem(option[idField])" ng-checked="itemSelected(option[idField])" type="checkbox"></input> {{ option[label] }}</li>'+
                        '</ul>'+
                    '</div>'+
                '</div><!-- end modal body-->'+
                '<div class="modal-footer">'+
                    '<div class="controls">'+
                        '<button class="btn btn-success" type="submit" ng-click="open=false">Ok</button>'+
                    '</div>'+
                '</div>'+
            '</div>'+
        '</div>',
    link: function(scope, element, attr){
        scope.open = false;
    },
       controller: function($scope){

            $scope.selectAll = function () {
                 $scope.model = _.pluck($scope.options, $scope.idField);
                console.log($scope.model);
            };            
            $scope.deselectAll = function() {
                $scope.model=[];
                console.log($scope.model);
            };
            $scope.toggleItem = function(id){
                if (_.contains($scope.model, id)) {
                    $scope.model = _.without($scope.model, id);
            } else {
                    $scope.model.push(id);
                }
                console.log($scope.model);
                return false;
            };
            $scope.itemSelected = function (id) {                 
                if (_.contains($scope.model, id)) {
                    true;//return 'icon-ok';// pull-right';
                }
                return false;
            };                                 
       }
   } 
});

Any idea why it's not working ?

Answer 1

Don't use the ngOptions directive here (ng-options="choices"), since it's a directive used on select controls.

See: http://jsfiddle.net/ev52F/10/